Bootstrap导航栏折叠

Question

我正在升级网站，以便它变得响应。我使用twitter引导。我已经尝试了几个不同的导航栏模板，我在网上找到，而且我总是遇到同样的问题。正如你在某些分辨率的图像中看到的那样，导航栏并没有按照它应有的方式崩溃。

问题：

导航栏的html代码：

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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="index.htm">Index</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="casameio.htm">casa do meio</a> 
      </li> 
      <li><a href="casabrava.htm">casa brava</a> 
      </li> 
      <li><a href="casavelha.htm">casa velha</a> 
      </li> 
      <li><a href="pool.htm">pool</a> 
      </li> 
      <li><a href="prijzen.htm">prijzen</a> 
      </li> 
      <li><a href="ons.htm">over ons</a> 
      </li> 
      <li><a href="activ.htm">activiteiten</a> 
      </li> 
      <li><a href="guestbook.htm">gastenboek</a> 
      </li> 
      <li><a href="omgeving.htm">kaartje</a> 
      </li> 
      <li><a href="contact.htm">contact</a> 
      </li> 
      <li><a href="links.htm">linken</a> 
      </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

我也有这个在我的CSS：

@media (min-width: 768px) and (max-width: 991px) { 
.navbar-collapse.collapse { 
    display: none !important; 
} 
.navbar-collapse.collapse.in { 
    display: block !important; 
} 
.navbar-header .collapse, .navbar-toggle { 
    display:block !important; 
} 
.navbar-header { 
    float:none; 
} 

}

任何帮助，将不胜感激！

Answer 1

这是完整的CSS（*考虑到你的网站结构），如果你想改变你的断点在较小的视口导航。

你也应该考虑将你的一些链接移动到下拉列表中，这样可以避免所有这些。

@media (max-width: 1199px) { 
 
    #custom-bootstrap-menu .navbar-collapse.collapse { 
 
    display: none !important; 
 
    } 
 
    #custom-bootstrap-menu .navbar-collapse.collapse.in { 
 
    display: block !important; 
 
    } 
 
    #custom-bootstrap-menu .navbar-toggle { 
 
    display: block !important; 
 
    } 
 
    #custom-bootstrap-menu .navbar-collapse { 
 
    text-align: center; 
 
    display: block !important; 
 
    } 
 
    #custom-bootstrap-menu .navbar-header { 
 
    float: none; 
 
    display: block !important; 
 
    } 
 
    #custom-bootstrap-menu .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: top; 
 
    } 
 
    #custom-bootstrap-menu .navbar-nav > li { 
 
    float: none; 
 
    } 
 
    #custom-bootstrap-menu .navbar-nav> li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<p> 
 
    <img src="http://www.huisjeinportugal.nl/images/top.jpg" class="img-responsive"> 
 
</p> 
 
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a> 
 

 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 navbar-menubuilder"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="casameio.htm">casa do meio</a> 
 

 
     </li> 
 
     <li><a href="casabrava.htm">casa brava</a> 
 

 
     </li> 
 
     <li><a href="casavelha.htm">casa velha</a> 
 

 
     </li> 
 
     <li><a href="pool.htm">pool</a> 
 

 
     </li> 
 
     <li><a href="prijzen.htm">prijzen</a> 
 

 
     </li> 
 
     <li><a href="ons.htm">over ons</a> 
 

 
     </li> 
 
     <li><a href="activ.htm">activiteiten</a> 
 

 
     </li> 
 
     <li><a href="guestbook.htm">gastenboek</a> 
 

 
     </li> 
 
     <li><a href="omgeving.htm">kaartje</a> 
 

 
     </li> 
 
     <li><a href="contact.htm">contact</a> 
 

 
     </li> 
 
     <li><a href="links.htm">linken</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

它看起来像你的导航相当广泛，所以你可以做的只是简单地改变，当引导的导航崩溃。看看你的代码，1000px似乎是崩溃发生的一个很好的突破点，但你可以玩弄它。

一个解决方案是去和添加一个新的媒体查询，将覆盖Bootstraps的。该解决方案将是罚款，如果你不想直接编辑您的引导代码：

@media (max-width: 1000px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
} 

另外，更容易的选择，如果你正在使用较少的是改变触发断点的变量。你也可以使用的东西沿着这些路线：

// Point at which the navbar becomes uncollapsed. 
@grid-float-breakpoint: 1000px;