2013-10-31 53 views

答えて

18

あなたはナビゲーションバーが崩壊するポイントを減らすことができます。..

あなたのナビゲーションバーの内容に応じて、ブートストラップのドキュメント(http://getbootstrap.com/components/#navbar

からオプション1

、あなたはnavbarが折り​​たたまれたモードと水平モードの間で切り替わるポイントを変更する必要があるかもしれません。 @ grid-float-breakpoint変数をカスタマイズするか、独自のメディアクエリを追加します。

オプション2

カスタムブートストラップビルドをしたくない場合は、CSSメディアクエリを使用することができます。例えば、ここに1280個のピクセルにブレークポイントを設定している:ブートストラップ3.1

ため

@media (max-width: 1280px) { 
    .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; 
    } 
} 

http://www.bootply.com/98488

アップデート3.1のナビゲーションバーが変更されているので、ブレークポイントを無効にするCSSはより異なっています3.0。これは、3.1 http://www.bootply.com/120604

+0

おかげスケリーに崩壊突然、次に示すからナビゲーションバーを防ぐことができます、それはあまりにも私を助け:) 3.1では – Alyas

+0

を、@グリッド・フロートbreakpoint'はまだ少ないよう、動作します 'カスタマイズのオプション1この変数を使用して更新されたCSSを生成します。変数を修正するための私の好みのテクニックは、私のプロジェクトでソースLessを使用し、ブートストラップをインポートする新しいLESSファイルで変数を個別にオーバーライドすることです。つまり、カスタマイズを失うことなくブートストラップの新しいバージョンにアップグレードできます。 –

関連する問題