DEMO

Question

嘿伙计我有点困惑为什么我的移动导航栏在页面加载时打开并且不能切换。我已经复制了我制作的其他移动导航栏中的代码，但显然我不知道。

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

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 {

    }
}

知道我哪里错了吗？

Answer 1

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

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

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

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

Answer 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

Answer 3

我遇到了同样的问题。除了创建一个id为“我想要这个崩溃”的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>

Bootstrap移动导航栏在加载时打开，不会切换

Here is the fiddle

3 个答案:

Here's a working demo in fiddle

DEMO