Html 为什么赢了'；我的引导导航栏不会崩溃吗？

我正在尝试为我的团队网站编写代码。导航栏不会在移动屏幕上折叠。我添加了“数据目标”来定位列表中的类。单击按钮时，列表应折叠，但不会折叠

<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/Home">Team 3774</a>
        </div>
        <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
        <div class="collapse navbar-collapse navHeaderCollapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="/Team Bio">Team Bio</a></li>
                <li><a href="/Our Coach">Our Coach</a></li>
                <li><a href="/Gallery">Gallery</a></li>
                <li><a href="/Outreach">Outreach</a></li>
                <li><a href="/Youtube">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>

切换导航

卸下

style=“height:0.866667px；”开关

添加一个单独的id标签，用于通过下拉菜单和按钮进行定位（语义实践）

您有两个navbar标题类（删除第二个，并将按钮和品牌定位组合在一起）

切换导航

试试这个：

<div class="navbar navbar-inverse navbar-fixed-top" role="banner">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/Home">Team 3774</a>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse" role="navigation">
            <ul class="nav navbar-nav">
                <li><a href="/Team Bio">Team Bio</a></li>
                <li><a href="/Our Coach">Our Coach</a></li>
                <li><a href="/Gallery">Gallery</a></li>
                <li><a href="/Outreach">Outreach</a></li>
                <li><a href="/Youtube">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>

切换导航

这个高度到底是什么？关于它为什么没有崩溃还有其他想法吗？你能发布一个带有html和css的JSFIDLE吗？它在JSFIDLE中工作，但在浏览器中不工作吗？检查一下网站。我上传了代码，完全按照你说的做了，但它仍然没有打开。是我的css打断了它吗？这是重复的吗f:，还是一个不同的问题？@KevinNelson这是不同的。他的导航栏在较小的设备上折叠，我的导航栏根本没有折叠。我的意思是更多地尝试答案，而不是问题。引导的默认行为是不关闭菜单。我提供了另一个问题的答案，作为下面的答案供您尝试。@KevinNelson我添加了你给出的答案是解决菜单没有关闭，但我的菜单甚至没有打开的问题。没有什么可关闭的。啊，你说过“列表应该折叠，但它没有”…这与不打开非常不同。您可能需要修改。您能在引导中重现问题吗？我认为没有必要为此添加脚本。下拉列表的默认引导脚本应该可以工作，因此该脚本一定有问题markup@AndrewLyndem，我已经使用过很多Bootstrap3，菜单不关闭默认情况下，se用于导航，不会将您重定向到其他页面（例如单页应用程序），如下：@AndrewLyndem该网站是www.robothive3774.com，您可以查看那里的所有元素，因为我的代码非常混乱（因为我刚刚开始）所以有很多不必要的东西。检查我的答案。我已经用正确的解决方案更新了它，并说明了它不起作用的原因。下拉菜单可以在没有任何额外脚本的情况下工作