2016-05-22 20 views
1

すべてのNavbarではなく、特定のNavbarのブレークポイントを変更する方法。ブートストラップ3 Navbar Collapse - 特定のNavbarのブレークポイントを変更します。

<ul class="navbar-collapse-500 nav navbar-nav"> 
    <li class="active"> 
     <a href="#">Link1</a> 
    </li> 
    <li> 
     <a href="#">Link2</a> 
    </li> 
    <li> 
     <a href="#">Link3</a> 
    </li> 
    <li></li> 
    </ul> 

は、私は私のクラスの.navbar-崩壊-500 500pxなどのために崩壊追加するためにCSSスタイルを追加すると、標準のナビゲーションバーのための崩壊のブレークポイントを触れないでください:

私はこのナビゲーションバーが500pxなどで崩壊したいです-navクラス。

答えて

0

理由だけではなく、あなたのCSSファイルにこれを追加しない:

@media (max-width: 500px) { 
    .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; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 
+0

それは.navbar-トグル、.navbar-ヘッダのクラスを使用するすべてのnavbarsのスタイルを変更します。私は一般的なクラスに触れたくないし、簡単なコピー・ペースト・ソリューションであるナビゲーション・バー用の標準ブートストラップCSSコードをすべて複製したくない。私はCSSコードのほんの一部(例えば、新しいクラス.navbar-header-500)を追加できるのだろうかと思います。 –

関連する問題