Twitter Bootstrap のナビゲーションバーでリンクを中央に配置するにはどうすればよいですか?

一元化されたリンクを使用した Twitter Bootstrap の Navbar のカスタマイズ

Twitter Bootstrap は、多用途の Navbar コンポーネントを含む、レスポンシブ Web デザインを構築するための堅牢なフレームワークを提供します。ただし、ナビゲーションバーのデフォルトの左揃えリンクから外したい場合は、CSS を調整する必要があります。

解決策 1: .tabs と .pills を使用する

以前の投稿では、.tabs と .pills を使用してリンクを中央に配置しようとしました。ただし、Bootstrap はこれらのスタイルをプライマリ ナビゲーション バーではなく、ナビゲーション タブとページネーション コントロールに特に適用するため、このアプローチは機能しませんでした。

解決策 2: .nav クラスと .navbar-inner クラスをカスタマイズする

ナビゲーションバーのリンクを一元化するための正しいアプローチは、リンクを含む .nav のスタイルを変更することです。 .navbar-inner は、ナビゲーションバーの全体的な配置を設定します。更新された CSS は次のとおりです。

<code class="css">.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner {
    text-align: center;
}</code>

この CSS はデフォルトのスタイルをオーバーライドし、ナビゲーションバーのリンクが水平方向の中央に表示されるようにします。

対象を絞ったカスタマイズのためのカスタム クラスの使用

ページ上の他のナビゲーション要素への影響を避けるために、ターゲットのカスタム クラスを作成できます。ナビゲーションバー。例:

<code class="html"><div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div></code>

次に、このカスタム クラスに次の CSS を適用できます。

<code class="css">.center.navbar .nav,
.center.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}</code>

サブメニュー項目の配置

後ナビゲーションバーのリンクを中央に配置し、サブメニュー項目を必ず左側に再配置してください。この追加 CSS を使用します:

<code class="css">.center .dropdown-menu {
    text-align: left;
}</code>

これらの変更により、他のナビゲーション要素の機能やスタイルを損なうことなく、ナビゲーションバーのリンクが中央に配置されます。

以上がTwitter Bootstrap のナビゲーションバーでリンクを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。