为什么我的引导导航栏不会崩溃？答案

【问题标题】：Why won't my bootstrap navbar collapse?为什么我的引导导航栏不会崩溃？
【发布时间】：2015-03-13 06:17:00
【问题描述】：

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

<!-- 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>

【问题讨论】：

这是重复的：stackoverflow.com/questions/21203111/…，还是其他问题？
@KevinNelson 不一样。他的导航栏在较小的设备上会崩溃，我的导航栏根本不会崩溃。
我的意思是更多地尝试答案，而不是问题。 Bootstrap 的默认行为是不关闭菜单。我已经提供了另一个问题的答案作为下面的答案供您尝试。
@KevinNelson 我将 js 添加到类中，但它仍然没有崩溃。您给出的答案是解决菜单没有关闭，但我的菜单甚至没有打开的问题。没有什么可以关闭的。
啊，你说“列表应该折叠，但它没有”......这与不打开有很大不同。你可能想要修改。你能在 bootply 中重现这个问题吗？

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

<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>

【讨论】：

我认为没有必要为此添加脚本。下拉菜单的默认引导脚本应该可以工作，所以标记一定有问题
@AndrewLyndem，我已经使用了很多 bootstrap 3，默认情况下菜单不会关闭导航，不会将您重定向到不同的页面（例如单页应用程序），按照这里：github.com/twbs/bootstrap/issues/9013
@AndrewLyndem 网站是 www.robotichive3774.com 你可以在那里查看所有元素，因为我的代码真的很乱（因为我刚开始）所以有很多不必要的东西。跨度>
检查我的答案。我已经用正确的解决方案和它不工作的原因更新了它。下拉菜单无需任何额外脚本即可工作

【解决方案2】：

删除style="height: 0.866667px;"
添加一个单独的 id 标签，用于通过下拉菜单和按钮进行定位（语义练习）。
您有两个 navbar-header 类（删除第二个并结合按钮和品牌锚。这是工作导航栏的 jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/6/

<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> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHead"> <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" id="navHead"> <ul class="nav navbar-nav pull-right"> <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发布一个jsfiddle吗
它是如何在 jsfiddle 中工作而不是在浏览器中工作的？检查网站。我上传了代码，完全按照你说的做了，但它仍然没有打开。会不会是我的 CSS 打断了它？