Twitter Bootstrap Navbar リンクを中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-02 09:11:29

オリジナル

434 人が閲覧しました

How to Center Twitter Bootstrap Navbar Links?

Twitter Bootstrap のナビゲーションバーのリンクを一元化する

Twitter Bootstrap のナビゲーションバーのリンクを中央に揃えようとして、ユーザーは、推奨 CSS:

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

ログイン後にコピー

ただし、代替ソリューションも存在します。

アプローチ 1: インラインブロック表示

メニュー項目を中央揃えにするには、次のようにします。 navbar とその li 要素の両方の表示プロパティを inline-block に設定し、フロートなしで並べて表示されるようにします。

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

ログイン後にコピー

アプローチ 2: カスタムクラス

または、「center」などのカスタムクラスを適用すると、他のページセクションとの潜在的な競合を防ぐことができます。

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

ログイン後にコピー

および対応する 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;
}

ログイン後にコピー

サブメニューの配置修正

最後に、サブメニュー項目を左に再配置するには、次の CSS が必要です:

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

ログイン後にコピー

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