4

Bootstap での水平方向の中央揃えに関しては、いくつかのオプションから選択できます。

offsetクラスを使用するか、空spanのクラスをプレースホルダーとして使用できます。別のオプションの 1 つは、次のようなカスタム配置を使用することです。

.center {
    float: none;
    margin: 0 auto;
}

div コンテナーのコンテンツが幅を 100% 埋める必要があるため、これらのオプションのいずれも私の問題を解決しません。

私が次のものを持っているとしましょう

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span4 offset4">
        <button class="btn">1-1</button>
        <button class="btn">1-2</button>
      </div>
    </div>
</div>

ボタンが の div スペース全体を埋めていない場合、span4実際の中央揃えは得られません。おそらく、コンテンツを 100% に引き延ばすことはできますが、これが良い方法かどうかはわかりません。

ここに、遊ぶためのキャンバスがあります。JSビン

4

2 に答える 2

7

インライン要素があるため、スパンでクラスを使用できます.text-center。また、空の要素よりもオフセットを使用する方がよいでしょう。

HTML

<div class="row-fluid">
  <div class="span4 offset4 text-center">
    <button class="btn">1-1</button>
    <button class="btn">1-2</button>
  </div>
</div>

更新されたデモ: http://jsbin.com/ayuFEhO/2/edit

于 2013-09-25T00:02:53.220 に答える
2

このボタンを水平方向に揃えたい場合は、新しいクラスを追加する必要はありません。.text-centerここで使用するのはビンですhttp://jsbin.com/UVeGejO/1/edit

Obs:text-centerクラスは既に Twitter のブートストラップ コードに存在します。

于 2013-09-25T00:04:02.710 に答える