2013-09-29 22 views
5

このメニューコードをブーストラップテンプレートで指定すると、画面サイズが小さく検出されたときに各メニュー項目をスタックして全幅にする必要があります。基本的には、「トリプルバー」メニューボタンが押されたときと同じ機能ですが、ユーザーが手動で押す必要はありません。ブートストラップ静的navbar強制的に小さな画面で拡大

ありがとうございます。

ユーザーがトリプルライン(ハンバーガー)メニューとすべてのメニュー項目をクリックしなくても、デフォルトでは表示すべてのメニュー項目を作りたかっれる私が理解
<!-- Static navbar --> 
    <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" 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> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

答えて

7

は、小さな画面上で水平に積層される必要があります。

上記のコードは問題ありません。 divとすべてのセットの"in"クラスをnavbar-collapseに追加するだけです。 http://jsfiddle.net/shekhardesigner/35gSz/

+1

あなたはブートストラップJSがページに含まれていることを確認してください:ここで

<div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" 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> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse in"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> 

はデモです。 –

+0

ビンゴ、完璧に動作します! –

関連する問題