大きいサイズ以外のすべてのサイズでnavbarを折りたたむ

Question

私のプロジェクトには簡単なブートストラップnavbarがあります。ブートストラップ例のページに示されたような：https://getbootstrap.com/examples/navbar/

私はそれを崩壊できるようにしたいと大を除くすべての画面サイズで「のようなモバイル」メニューを展開するために少しだけキャレット・アイコンを表示したいです。

1200pxより大きい画面にのみフルメニューを表示したいとします。

私たちのプロジェクトでは、基本的なブートストラップscssファイルは、子プロジェクトで広く使用されているので変更できません。

私は、メニュー項目にナビゲーションバー、トグルボタン上visible-lg-blockとhidden-sm hidden-xs hidden-mdでプレイしようとしたが、期待どおりに動作しません。 carretアイコンは、ブランドテキストの右側に表示され、ナビゲーションバーの右側には表示されません。私はプル・右で何の効果もなかった。

これを達成する方法はありますか？

Answer 1

次のようにnavbar cssクラスをオーバーライドしてメディアクエリを使用すると、最大サイズ1200pxまで折り畳まれた状態に保たれます。 cssファイル内に次のcssルールを追加し、headタグのbootstrap cssファイルリンクの直後にこのカスタムCSSファイルを追加してください。

/*To keep the navbar collapsed on less or equal to 1200px screens size*/ 
    @media (max-width: 1200px) { 
    .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-collapse.collapse.in { 
      display: block !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://codepen.io/Nasir_T/pen/jVaQyX