web-dev-qa-db-ja.com

Twitterの列の中央揃えbootstrap

Bootstrapの学習を始めました。私の質問は、列を水平方向に中央揃えする方法です。bootstrapには12列のレイアウトが含まれ、中間の番号はありません。 11列のレイアウトである場合、より明確にするために、真ん中の数字は6（左5列、中央1列、右5列）でした。

twitter-bootstrapalignment
54
Sharath Daniel

質問はここで正しく回答されています Twitter Bootstrap 3を使用して列を中央に配置

奇数行の場合：つまり、col-md-7またはcol-large-9はこれを使用します

中央揃えにする列にcol-centeredを追加します。

<div class="col-lg-11 col-centered">

そして、これをスタイルシートに追加します。

.col-centered{
float: none;
margin: 0 auto;
}

偶数行の場合：col-md-6またはcol-large-10はこれを使用します

単にbootstrap 3のオフセットcolクラスを使用します。すなわち、

<div class="col-lg-10 col-lg-offset-1">
101
Lawrence Black

bootstrap 3を使用する場合は、... withoffset columnsを使用して目的を達成することができます。詳細については、これらの例を参照してください。
http://getbootstrap.com/css/#grid-offsetting

要するに、あなたのdivを見ることなく、カスタムクラスを使用せずに役立つかもしれない例がここにあります。 "col-6"がどのように使用され、その半分が3であることに注意してください...だから "offset-3」が使用されます。均等に分割すると、centered間隔を許可します：

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>
23
martenc

あなたが1列を置くことができないなら、あなたは単に2列を真ん中に置くことができます...（私はちょうど答えを組み合わせています）Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

さらに、これをスタイルに追加することにより、列を中央揃えにテキストできます。

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

さらに、別の解決策があります here

10
efirat

上記のアプローチを試しましたが、これらのメソッドは、1つの列のコンテンツの高さが動的に増加すると失敗し、基本的に他の列を押し下げます。

私にとっては、基本的なテーブルレイアウトソリューションが機能しました。

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}
0
SkyKOG