4

Twitter ブートストラップのブランドを中央に配置すること、またはナビゲーション バーのリスト項目を中央に配置することについていくつか質問がありますが、両方を中央に配置する方法はわかりません。

これは、 Modify twitter bootstrap navbarで使用される例ですが、ブランドではなく、リスト項目のみを中央揃えにします。HTML の構造は次のとおりです。

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

ここにライブデモがあります: http://jsfiddle.net/C7LWm/

ブランドとリスト項目の両方を中央に配置して、両方を 1 行に配置するにはどうすればよいですか?

編集：

ナビゲーションバーにドロップダウンがある場合（更新された回答のように）、ドロップダウンが本当に台無しになっていることに気付きました（ドロップダウンがまったく表示されず、表示された場合、フォームの背景が消えます）。おそらくより良い方法は、すべてのアイテムが中央に配置されておらず、1 つの行に 1 つの線がある場合です。代わりに、非応答ビューと同様に、すべて 1 つの行に配置してから中央に配置する必要があります。ライン。それは可能ですか？

4

2 に答える 2

21

UL を中央に配置するために、クラスを記述する必要はありません。

Bootstrap は必要なものをすべて提供します。これを行うだけです。

<ul class="list-inline center-block text-center">
 // your list
</ul>
于 2014-04-10T05:26:20.050 に答える
3

中央に配置する必要があるのは、コンテナではなく、<li>そのコンテナです。子要素がフローティングかどうかは関係ありません。実際に中央に配置したい親だけがinline-blocksである必要があります。

いいとは言えませんし、小さな画面では別の動作が必要になるかもしれませんが、これはデモで機能します:

.navbar .brand,
.nav-collapse {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
.navbar-inner > .container { text-align:center; }

セレクターが、必要な要素のみをターゲットにするのに十分具体的であることを確認してください (つまり、折りたたみボタンではありません)。

レスポンシブnavbar で更新:レスポンシブ デモ

@media (max-width: 979px) {
    .navbar .brand,
    .nav-collapse {
        display: block;
    }
}
于 2013-03-09T00:45:48.840 に答える