2016-04-23 99 views
0

在某些設備中,摺疊的導航欄項目未正確顯示。自舉導航欄在某些設備上不顯示

的是這樣的:

enter image description here

,應該是這樣的:

enter image description here

導航欄代碼:

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"> 
     <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 navbar-left"> 
       <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> 

回答

1

既然不能在問題尚未置評,我想分享我的這樣想:

你在說什麼設備(意味着哪種屏幕尺寸)?沒有任何CSS,很難說爲什麼你會看到這種行爲。你能提供一個有效的樣本嗎?

也許這可以幫助你:

改變摺疊手機導航欄斷點
導航欄摺疊 到其垂直移動視圖時,視口窄於 @網浮斷點,並擴展當視口的寬度至少爲@ grid-float-breakpoint時,將其視爲水平非移動的 視圖。 在導航欄 合攏/展開時,在「較少」來源中調整此變量以控制。默認值爲768px(最小的「小」或 「平板電腦」屏幕)。

http://getbootstrap.com/components/#navbar-default

您檢查了網格系統和一般的自舉其媒體查詢? (http://getbootstrap.com/css/#grid-media-queries