javascript - Bootstrap を使用した中央の「行」コンテンツ

Question

コンテンツを「行」の中央に配置するのに問題があります。例のボタンは常に左側にあり、右側のスペースが多すぎます。

このボタンを中央に配置する方法はありますか?

thxトーマス

<div class="abc">
<div class="row red show-grid">
    <div class="span2 btn">a</div>
    <div class="span2 btn">b</div>
    <div class="span2 btn">c</div>
    <div class="span2 btn">d</div>
    <div class="span2 btn">e</div>
</div>

Answer 1

クラスspan2にはプロパティがありますfloat:left：

<div class="block">
    <div class="row show-grid">
        <div class="span2 btn">a</div>
        <div class="span2 btn">b</div>
        <div class="span2 btn">c</div>
        <div class="span2 btn">d</div>
        <div class="span2 btn">e</div>
    </div>
</div>

CSS:

.block {
    max-width: 500px;
}
.block > div {
    text-align:center;
}
.block > div > div {
    float:none; 
}

span2(レイアウトとグリッド クラス) とbtn(ボタン スタイル クラス) を一緒に使用しないことを検討します。

Answer 2

http://jsfiddle.net/sTwj7/10/

HTML

<div class="abc">
    <div class="row red show-grid">
        <div class="btn">a</div>
        <div class="btn">b</div>
        <div class="btn">c</div>
        <div class="btn">d</div>
        <div class="btn">e</div>
    </div>
</div>

CSS

.red {
    background-color: red;
}
.abc {
    max-width: 500px;
}

.red .btn {
    width: 160px;
    margin: 0 auto;
    display: block;
}

Answer 3

2018年更新

ブートストラップ 4

自動レイアウト列を使用し、text-center

  <div class="row text-center">
    <div class="col-sm border">a</div>
    <div class="col-sm border">b</div>
    <div class="col-sm border">c</div>
    <div class="col-sm border">d</div>
    <div class="col-sm border">e</div>
  </div>

https://www.codeply.com/go/2fDFPSB5A4

---

ブートストラップ 3

列オフセットを使用し、text-center

  <div class="row red show-grid text-center">
    <div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
    <div class="col-md-2 btn btn-default">b</div>
    <div class="col-md-2 btn btn-default">c</div>
    <div class="col-md-2 btn btn-default">d</div>
    <div class="col-md-2 btn btn-default">e</div>
  </div>

https://www.bootply.com/zEYom4EJUF

---

ブートストラップ 2 (元の回答)

次のように CSS を追加して、スパンを中央に配置できます。

http://jsfiddle.net/sTwj7/9/

<div class="span2 pull-center">
     <h1>a</h1>
</div>

CSS クラス:

.pull-center {text-align:center;margin:0 auto !important;float:none !important;}