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

Twitter Bootstrap のナビゲーションバーの変更

Twitter Bootstrap のナビゲーションバーは、さまざまなレイアウトに合わせてカスタマイズできる多用途のコンポーネントです。この記事では、一般的なユーザーのリクエストに対応して、ナビゲーション バー内のリンクを中央に配置する方法を説明します。

問題: ナビゲーション バーのリンクの位置がずれている

元々、ナビゲーション バー内のリンクは、中央調整の望ましい結果。既存の CSS ルールを使用しようとしましたが、望ましい結果が得られませんでした。

解決策: インライン表示とテキストの中央揃え

ナビゲーションバーのリンクを中央に配置するには、 inline-block へのリンクと、ナビゲーションバーのコンテナーの text-align プロパティを中央に配置します。変更された 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>

ターゲットを絞った変更用のカスタム クラス

他のナビゲーション セクションへの不要な変更を避けるために、目的のナビゲーション バー メニューをターゲットとするカスタム クラスを作成することをお勧めします。たとえば、「center」というクラスを作成できます:

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

Submenu Alignment

メインリンクを中央に配置した後、サブメニュー項目が変更の影響を受けている場合は、サブメニュー項目を左側に再配置する必要がある場合があります。これは、追加の CSS で実現できます:

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

ライブ デモンストレーション

このソリューションのライブ デモンストレーションは、次の場所にあります: http://jsfiddle.net/C7LWm/7/.

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