导航栏菜单切换器在移动浏览器上无法打开



第一次来。我有麻烦与我的引导5.1导航栏菜单。一些背景:我通过Xampp在本地托管我的网站,我的页面是php的,允许表单和cookie。桌面上的一切都很好。我已经在不同大小的设备上测试了我的网站在DevTools中的响应性,下拉菜单(折叠的导航菜单)在这些设备上工作得很好。然后,我使用本地托管服务器在我的S21 Ultra和Tab S6上尝试了下拉菜单。当汉堡包切换器出现时,它不会下拉菜单。我试着删除按钮图标,这样我就可以看到按钮是否在切换,它是,但它似乎并没有实际改变导航栏的任何值,因为它在桌面或DevTools中。我什么都试过了。我的代码是最新的,js和css Bootstrap被放置在正确的位置。请帮助。

<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>

再次,它工作良好的桌面和移动视图使用DevTools在Chrome上。任何更改(css方面)都只针对颜色和大小,因此它们不应该干扰。网页上的所有其他按钮都可以工作。我真不知道该怎么走下去。

我只需要在使用移动设备时打开下拉菜单。

像下面这样删除data-bs-target和data-bs-toggle中的-bs-

<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>

最新更新