ホームページ > ウェブフロントエンド > CSSチュートリアル > Twitter Bootstrap で Navbar リンクを中央に配置するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-11-01 03:11:28
オリジナル
826 人が閲覧しました

How to Center Navbar Links in Twitter Bootstrap?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート