Twitter bootstrap 导航栏未使用引导折叠

我有一个网站，是用推特引导。在大屏幕上，导航栏看起来很不错，但如果你在手机上看到相同的导航栏，导航栏就不会倒塌

这是我的代码：

<div class="container">
  <div class="masthead">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
            <li class="active"><a href="/" class="">Home</a></li>
            <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
            <li><a href="koersen.html">Officiële koersen</a></li>
            <li><a href="webshop/" target="_blank">Webwinkel</a></li>
            <li><a href="diversen.html">Diversen</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

---

在第三节课上，我也试着使用导航折叠，但它也在大屏幕上折叠

您需要包括twitter引导的响应css文件，还需要使用bootstrap-collapse.js

注意“响应导航栏”上的信息：

小心！响应导航栏需要折叠插件和响应引导CSS文件

快速链接：

• css:
• js:

---

是按照说明操作（包括响应css、bootstrap-collapse.js和转换插件更新：（bootstrap transition.js）和jQuery）。您需要添加触发折叠的按钮/链接。此标记获取属性：data toggle=“collapse”data target=“.nav collapse”，其中数据目标可以是任何css选择器。将导航置于数据目标下选定的标记之间，请参见：

html：

<div class="container">
      <div class="masthead">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="/" class="">Home</a></li>
                <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
                <li><a href="koersen.html">Officiële koersen</a></li>
                <li><a href="webshop/" target="_blank">Webwinkel</a></li>
                <li><a href="diversen.html">Diversen</a></li>
                <li><a href="contact.php">Contact</a></li>
              </ul>
              </div>  
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>
</div>

您需要检查bootstrap.js或bootstrap.min.js的，并检查折叠和转换以进行编译

给您的父div一个

id

。如果它已经有一个，请记下它。您的父div将是其直接子项构成下拉列表[链接、按钮等]的div

将

数据切换

和

数据目标

添加到前面提到的父div的每个子元素
假设父div的是

id=“my_parent_div”

，子元素应该在链接属性中附加

data toggle=“collapse”data target=“#my_parent_div”

以下是我的固定导航条形码示例：

<div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#book"  data-toggle="collapse" data-target="#example-navbar-collapse">Book a Room!</a></li>
        <li class="divider"></li>
        <li><a href="#services" data-toggle="collapse" data-target="#example-navbar-collapse">Services</a></li>
        <li><a href="#packages" data-toggle="collapse" data-target="#example-navbar-collapse">Packages</a></li>
        <li><a href="#contacts" data-toggle="collapse" data-target="#example-navbar-collapse">Location</a></li>
      </ul>
    </div>

---

希望这有帮助：）

我也有类似的问题。我完全搞不懂为什么我的导航栏在手机里没有倒塌。最后我发现我错过了下面的meta标签

---

这将解决问题。

我也遇到了同样的问题，我发现我加载了两次jQuery，并且在引导后在页脚中加载了jQuery。除了由于某种原因而崩溃之外，其他一切都在页面上运行。我回到了基础，它解决了这个问题。加载jQuery，然后引导，并确保没有其他随机包含页面也在加载jQuery。

---

这与引导4导航元件有关

要添加到dustbuster，我也遇到了这个问题，尝试先加载JQuery，然后加载Boostrap，但问题没有得到解决，并注意到下面链接中的另一个提示：-

---

添加Bootstrap.min.js而不是Bootstrap.min.css。添加js时，请不要删除Bootstrap.min.css。两个文件都添加后，问题就解决了。

我现在将此代码用于第一次响应中包含的两个文件。现在导航栏崩溃了，但如果我按下按钮，它就不会有任何问题。引导层工作正常。你能告诉我完整的代码吗？页面上可能有javascript错误OK，这是页面的完整代码：查看源代码：在浏览器中粘贴并包含“查看源代码”。该死！这对我有用。老实说，这让我难堪了几天。一个很好的干净的解决方案。你能解释一下为什么这样做，或者给我一些文档吗？没有压力。这并没有解决我的问题，有什么建议吗？我尝试了这个，它在Angular 4中完全打破了导航，在引导对我起作用之前移动了jQuery。这很有意义，因为引导使用jQuery。

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>  

.navbar .in .nav li {
   display: block;
   float: none;
   width:100%;
}

<div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#book"  data-toggle="collapse" data-target="#example-navbar-collapse">Book a Room!</a></li>
        <li class="divider"></li>
        <li><a href="#services" data-toggle="collapse" data-target="#example-navbar-collapse">Services</a></li>
        <li><a href="#packages" data-toggle="collapse" data-target="#example-navbar-collapse">Packages</a></li>
        <li><a href="#contacts" data-toggle="collapse" data-target="#example-navbar-collapse">Location</a></li>
      </ul>
    </div>