ホームページ > ウェブフロントエンド > CSSチュートリアル > Bootstrap 3 Navbar の崩壊を防ぐにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-11-24 03:43:17
オリジナル
456 人が閲覧しました

How Can I Prevent My Bootstrap 3 Navbar from Collapsing?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート