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

Twitter Bootstrap ナビゲーション バーを変更する: ナビゲーション リンクを中央に配置する

Twitter Bootstrap ナビゲーション バーは、Web サイト ナビゲーションのための実用的なソリューションを提供します。ただし、ナビゲーション リンクを中央に配置するなど、外観をカスタマイズしたい場合があります。

問題: ナビゲーション リンクを中央に配置する

ナビゲーション バーの配置を変更するには、CSS コードが必要です。ただし、一部の方法では望ましい結果が得られない場合があります。正しいアプローチを見てみましょう。

解決策: インライン ブロック レイアウトとテキスト配置

ナビゲーション メニュー項目を中央に配置するには、表示プロパティを float: left ではなく inline-block に設定します。これにより、レイアウトを崩さずに項目を水平に整列させることができます。さらに、ナビゲーションバーの内部コンテナの text-align プロパティを center に設定します。

<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>

特定のナビゲーションバー インスタンスをターゲットにする

Web ページに複数のナビゲーションバーがある場合は、中央に配置したい特定のナビゲーションバーをターゲットとする専用の CSS クラス。これにより、他のナビゲーションバーへの望ましくない効果が防止されます。

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

<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>

Demo

ライブ デモは http://jsfiddle.net/C7LWm/show でご覧ください。 /

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