Bootstrap 3 Navbar の崩壊を防ぐにはどうすればよいですか?

Bootstrap 3 でのナビゲーションバーの折りたたみの防止

Bootstrap のナビゲーションバーは、さまざまな画面サイズに適応する折りたたみ可能なメニューを作成する便利な方法を提供します。ただし、特定のシナリオでは、メニューを常に表示しておくために折りたたみ機能を無効にすることもできます。

解決策

ナビゲーションバーが折りたたまれないようにするには、次のようにします。特定のCSSをオーバーライドできますプロパティ:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

説明

• 最初のプロパティは、デフォルトの .collapse 動作をオーバーライドし、メニューを強制的に表示したままにします。
• 2 番目と 3 番目のプロパティは、左側と右側のメニュー項目が両方とも左に移動し、同じ位置に揃えられるようにします。 line.
• 4 番目のプロパティは、小さな画面での右側のメニューの配置に関する小さな問題を修正します。

サンプル コード

検討してください次のナビゲーションバーの HTML コード:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png" />
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

CSS を適用することにより上記のオーバーライドにより、画面サイズに関係なく、このナビゲーションバーは折りたたまれなくなります。

以上がBootstrap 3 Navbar の崩壊を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。