0

私は少し混乱しています。通常のブートストラップナビゲーションバーのメニュー項目を中央に配置するのが好きです。
しかし、編集しなければならない適切なクラスが見つかりません。を使用する必要がありますtext-alignか、それともmargin: 0 auto;このようなことを実現するために使用する必要がありますか？

現在、このCSS引数を、、およびに追加しようとし.navbarまし.navbar-innerた.nav。何も機能しません。

ブートストラップ開発者がいる場合は、私を助けてください！

ブートストラップ関連のフォーラムがあるかどうか知っていますか？

4

3 に答える 3

1

固定の高さを割り当ててから、中央に配置margin: 0 auto;する必要がある要素に割り当てますが、中央はまたはでdivはなく、固定幅 であることに注意してください。floatedposition: absolute;

 <div class="parent">
      <div class="inn"> ... </div>
    </div>

中央.innに固定する幅を設定する必要がありますfloated or position: absolute。

.inn{
  width: 20px;
  margin: 0 auto;}
于 2012-09-01T06:30:39.823 に答える
0

次のことを試してみてください。

#div-id-inside-navbar{
  left: 50%;
  position: absolute;
  margin-left: -100px /* This should be half the width of your centered content */
}

私は自分のブートストラップサイトのロゴを中央に配置しました、そしてこれは私がしなければならなかったことです。正確な理由は調べていませんがtext-align: center;、うまく機能しているとは思いません。これは、CSSを使用して垂直方向に中央揃えにする方法と似ています。

于 2012-09-01T05:39:23.577 に答える
0

あなたの質問に答えるために、あなたが修正すべきセレクターは.navbar .nav

そのセレクターを変更すると、マージンアプローチの実装に進むことができます。

.navbar .nav {
    margin: 0 auto;
    width: ...px;     /* width of .navbar .nav */
    float: none;
}

または、ニックが述べたことと同様に：

.navbar .nav {
    position: absolute;
    left: 50%;
    margin-left: ...px; /* half of width of .navbar .nav */
}

私はこれについてあまり深く掘り下げませんでしたが、それに.navbar .nav関連付けられた幅を取得しているようです（私にとっては1170pxでした）。その幅のため、margin: 0 auto影響はありません...幅（または左半分の幅のマージン）をハードコーディングする必要のないソリューションを考え出すとよいでしょう。

于 2012-09-01T06:00:31.150 に答える