Question

我是Bootstrap的新手，到目前为止，我找不到解决问题的方法。我的页面标题上有一个导航栏，它有多个菜单项，在较小的屏幕上，它会折叠成“汉堡包”式按钮。到现在为止还挺好。但是，在我的一个子页面上，我在顶部有另外一个导航栏，只有几个选项，即使在最小的屏幕上也不需要这个导航栏。因此，覆盖所有导航栏的CSS将不适用于我的情况......任何想法是否可以完成？

Answer 1

正如您在 bootply ：http://www.bootply.com/ZhmRJQI7GD中看到的那样，第一个导航栏崩溃，而不是第二个......

<强> CSS ：

#secondNav{
    margin-top:5em;
}


#secondNav .navbar-nav>li {
 float: left !important; 
}
#secondNav .navbar-header{
  float: left !important; 
}
#secondNav .navbar-nav{
   margin:0 !important;
}
#secondNav .navbar-nav>li a{
  padding-top: 15px !important;
padding-bottom: 15px !important; 
}

HTML ：

<div class="navbar navbar-default navbar-fixed-top">
 <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
      <a 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>
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
      </ul>
    </div>
</div>


<div id="secondNav" class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand Two</a>
  </div>
   <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="divider-vertical"></li>
      <li><a href="#">More</a></li>
  <li><a href="#">Options</a></li>
  </ul>
  </div>

Bootstrap导航栏崩溃

1 个答案: