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;