【问题标题】：Bootstrap mobile navbar is open on load and won't toggleBootstrap 移动导航栏在加载时打开并且不会切换
【发布时间】：2017-04-16 20:48:04
【问题描述】：

大家好，我对为什么我的移动导航栏在页面加载时打开并且不会切换感到有些困惑。我已经从我制作的其他移动导航栏中复制了代码，但是我显然丢失了。

您知道导航栏只显示小型设备，因为大型设备的导航栏是独立的。

Here is the fiddle

这是我的 HTML：

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
    <div class="container">
        <button class="visible-sm visible-xs navbar-toggle" type="button"
                data-target="#i-want-this-to-collapse" data-toggle="collapse" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="mini-navbar navbar-brand" href="/">
            <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                 class="img-rounded logo-nav mini-navbar" />
        </a>
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Join us</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    About<strong class="caret"></strong>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a></li>
                    <li> <a href "#">Our Partners</a></li>
                </ul>
            </li>
            <li><a href="#">How To Find Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

这是我的 CSS：

.mini-navbar {
    opacity: 1;
    padding: 5px 0;
}

@media only screen and (max-width : 992px) {
    /*body {display: none;}*/
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav {
        float: none;
    }
    .nav.navbar-nav {
        clear: both;
        float: left;
        margin: 0 0 0 -15px;
        width: 100%;
    }
    .navbar-default .navbar-nav>li>a {
        border: none;
    }

    .navbar-nav > li:last-child {
        border: none;
    }
    .navbar-default {

    }
}

知道我哪里出错了吗？

【问题讨论】：

您所说的 “不会切换” 到底是什么意思？ hide/show?如果是这样，您是否使用任何仅 css 的技巧来切换它？如果没有，bootstrap js 会做那部分吗？如果没有，js在哪里..？
它是 Bootstrap 我已经添加了 Bootstrap 组件但是我不能添加其中一个 CSS 类我只是不确定是哪一个。
只是为了确定，你添加了引导 js 吗？

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您需要将切换按钮和导航栏品牌锚包装在导航栏标题中：

<div class="navbar-header"><!-- --></div>

您需要将 navbar-nav 菜单项列表包装在导航栏折叠部分中：

<div class="navbar-collapse collapse"><!-- --></div>

最重要的是，用于切换的data-target 采用了您要切换的部分的 CSS 选择器。您目前拥有：

<button data-target="#i-want-this-to-collapse" data-toggle="collapse" >

但是没有与选择器 #i-want-this-to-collapse 匹配的东西，即具有该 ID 的东西。所以添加一个到你的导航栏折叠：

<div class="navbar-collapse collapse" id="i-want-this-to-collapse">

Here's a working demo in fiddle

检查小提琴的完整代码。

以后，我将从docs 中的一个示例开始，然后朝着您自己的解决方案努力，这样您就可以找出您在此过程中遇到的问题。停顿，后退几步看看是否有意义。如果不是，请问那个问题，因为这可能是一个更好的问题，即为什么 x 不起作用？我认为它会做y。

【讨论】：

我尝试在我的网站中实现您告诉我的内容，但是它的功能与 JSFiddle 中的方式不同看看它什么时候折叠它并没有像 JSFiddle 示例那样起作用:(
@NickM，无论您是否能够在您的网站上成功实施它们，请投票并接受您认为有帮助的答案。如果您仍然遇到问题，请简化您自己的代码，直到您发现问题，然后通过一个有效的外部演示提出一个具体问题。另见：Something in my web site or project doesn't work. Can I just paste a link to it?

【解决方案2】：

您的代码有问题，请尝试以下无错误的工作代码：

   <!-- Static navbar -->
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Join us</a>
  </li>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About<strong class="caret"></strong></a>
    <ul class="dropdown-menu">
      <li> <a href "#">The Team</a>
      </li>
      <li> <a href "#">Our Partners</a>
      </li>
    </ul>
  </li>
  <li><a href="#">How To Find Us</a>
  </li>
  <li><a href="#">Contact Us</a>
  </li>
</ul>
    </div><!--/.nav-collapse -->

DEMO

【讨论】：

我的代码出了什么问题？我尝试添加您的导航代码，但是当它实施到我的网站时它将无法工作，它涵盖了整个视口。我可以在当前代码中添加什么来进行切换？谢谢:)

【解决方案3】：

我也遇到了同样的问题。除了制作一个 id 为“i-want-this-to-collapse”的 div 之外，这个 div 还有一些必需的类。分别是“折叠”和“导航栏折叠”。所以你基本上必须写：

   <div id="i-want-this-to-collapse" class="collapse navbar-collapse">
    	<ul class="nav navbar-nav navbar-right visible-xs-block">
          <li>...</li>
          <li>...</li>
    								
    	</ul>
    </div>

【讨论】：