2016-04-23 18 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であるときに、水平でない非モバイルの ビューに移動します。 この変数をLessソースで調整して、navbar が折りたたまれて展開されるタイミングを制御します。デフォルト値は768ピクセル(最小の「小さな」または 「タブレット」画面)です。 http://getbootstrap.com/components/#navbar-default

から

あなたは、一般的には、ブートストラップのグリッドシステムとそのメディアクエリをチェックアウトしたことがありますか? (http://getbootstrap.com/css/#grid-media-queries

関連する問題