ブラウザの幅が960px未満の場合、トップのナビゲーションバーのドロップダウンメニューが崩れるのを防ぐにはどうすればよいですか？

Question

CSSのさまざまなクラスの最小/最大の高さと幅で試してみましたが、上のナビゲーションバーがドロップダウンメニューを折り畳まないように見えません。私は固定された幅を好むだろうが、フルスクリーンメニューは上部に固定されています。ドロップダウンはうまくいきますが、ブラウザウィンドウの幅を小さくすると折りたたまれます。私はトグルを削除しましたが、ブートストラップからの愛はありません。ここでは、ブートストラップ2.0からのコードは次のとおりです。

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
     <a class="brand" href="./index.html">Brand Name&nbsp;</a> 
     <ul class="nav"> 
      <form class="navbar-search"> 
      <input type="text" class="search-query" placeholder="Search Active Page..."> 
      </form> 
     </ul> 

     <ul class="nav pull-right"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        <i class="icon-user icon-white"></i>&nbsp;Pages<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">My Pages</a></li> 
        <li><a href="#">New Page</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Share Your Pages</a></li> 
        <li><a href="#">Page Browswer</a></li> 
        </ul> 
       </li> 

       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        <i class="icon-cog icon-white"></i>&nbsp;Settings<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Upload Images</a></li> 
        <li><a href="#">Upload Files</a></li> 
        <li><a href="#">Link Other Accounts</a></li> 
        <li><a href="#">Manage Labels</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Privacy Settings</a></li> 
        <li><a href="#">Help</a></li> 
       </ul> 
       </li> 
      <li>&nbsp;&nbsp;<img src="img/small_fb_pic.jpg" vspace="5px"></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       John<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Logout</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Help</a></li> 
       </ul> 
      </li>  


     </ul> <!-- end left justified menu items --> 


    </div> 
    </div> 
</div> 

Answer 1

これは、（特にモバイルデバイス上の）画面サイズに調整することができ、ウェブサイト上の応答設計のためです。ここでは詳細をご覧ください：

http://twitter.github.com/bootstrap/scaffolding.html#responsive

、ブートストラップソリューションでこれを修正するブートストラップカスタマイズ]ページに移動し、応答レイアウトをオフにして、ブートストラップファイルを再ダウンロードするには。

http://twitter.github.com/bootstrap/download.html

それは芋、手動でブートストラップファイルを編集するよりはましです。お役に立てれば。

Answer 2

流体レイアウトの幅の定義がcss/bootstrap-responsive.cssに含まれているあなたは、ブートストラップは、単に@media定義でmin-widthとmax-width値を変更して、メニューを崩壊するときの範囲を変更することができます。例えば

は、ナビゲーションバーに関連max-width: 800pxとmax-width: 980pxを含む@media宣言置き換える窓未満800pxにナビゲーションバーの崩壊を作ります。 min-widthについても同じ操作を行います。

105：@media (min-width: 768px) and (max-width: 800px) { ... }

281：執筆時点では、これらの変化は、（彼らは今、おそらく異なる）ライン105、281上にあるように起こっており、各ラインには、次のように見えるように変更することを381な@media (max-width: 800px) { ... }

381：@media (min-width: 800px) { ... }

Answer 3

HTMLからbootstrap-responsive.cssへのスタイルシートリンクを削除します。これ以上何も折りたたまれません。 3つの非常に便利なソリューションについては

Answer 4

このリンクを参照してください。私は彼のリストにオプション1を使用して終了 http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/

を...基本的な要点は、あなたがいない場合、あなたのResponsive.lessやResponsive.css編集することですなど、.lessソースへのアクセス権を持っている：

追加： ：（[データ-NO-崩壊= "真"]）ではな​​い

次のクラスのスタイリングが定義されているどこでも。 .navbar.dropdown-menu

（私はレスポンシブに7つの場所を見つけました。順不同リストに

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     <i class="icon-user"></i> 
     {{ account.FirstName}} {{ account.LastName }}&nbsp; 
     <b class="caret"></b> 
    </a> 

    <ul class="dropdown-menu" data-no-collapse="true"> 
     <li><a href="/logout.cshtml">Logout</a></li> 
    </ul> 
</div> 

お知らせデータ-NO-崩壊属性：以下のファイル）

その後、あなたはあなたのHTMLを定義し、あなたに属性を追加することをお勧めします。

EDIT： 今、あなたのドロップダウンがブートストラップ・responsive.cssするファイルを...

Answer 5

1. Go]を展開しませう
2. ゴーであなた幅に数952
3. 変更幅をラインしますナビゲーションバーが崩壊してほしい

Answer 6

あなたはブートストラップバージョン2について話していると思います。ブートストラップ3の回答を探している人がいるかもしれません。この答えはあなたのためです！ Bootstrap customization page

へ

1. Goがハードコーディング何かのため@グリッド・フロートブレークポイント値を再定義（例えば520px）または@のような小さな画面サイズの画面-XS-分
2. 押し下部にあるボタンあなたのbootstrap.cssとbootstrap-min.cssファイルを、ダウンロードしたzipファイルのもので置き換えてください。