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

Twitter Bootstrap ナビゲーションバーを使用する場合、デフォルトの左揃えではなく、ナビゲーション リンクを中央に揃える必要がある場合があります。 。これを実現するには、CSS スタイルシートを使用して次のカスタマイズを行います。

解決策

ナビゲーション リンクをナビゲーション バーの中央に配置するには、次の 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;
}

代替アプローチ

ブートストラップのデフォルトを保持し、特定のナビゲーションバー メニューをターゲットにするには、カスタム クラスを作成し、それをナビゲーションバー コンテナーに適用します:

    

        ....
    

次に、CSS スタイルシートの .center クラスをターゲットにします:

.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;
}

その他の考慮事項

サブメニュー項目を左に揃えるには、次の CSS ルールを追加します。

.center .dropdown-menu {
    text-align: left;
}