web-dev-qa-db-ja.com

Bootstrap 3グリッド、1つの行にいくつの列があるか*本当に*重要ですか？

bootstrap 3つのフォームグループが含まれているフォームレイアウトがあります。これらのフォームグループを<小で1列、タブレットサイズで2列、大きな画面で4列に配置します。

私はそれが完全に機能しているように見えますが、ここでいくつか読んだ後、行のすべての列は合計で12でなければならないという想定ルールに違反しているようです。合計が12になるはずだと言うときは「理想的」です。明確なガイダンスはここにはないようです。

私は私のグループを次のように定義しました：

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

現在、各行に4つあります。つまり、4 * col-lg-3の合計は12になりますが、4 * col-md-6フォームグループdivの合計は12ではなく24になります。

ただし、これは問題ではないようで、各ブレークポイントで完全に機能します。

心配すべきですか？何か問題はありますか？確かに、同じページのcol-md-6とcol-lg-3に対してこれらのすべてのコントロールを1回ずつ複製する2つの完全に異なるレイアウトを行うことは想定されていませんか？

htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout
25
JohnC

いいえ、 ブートストラップグリッド12列まで追加する必要があることを義務付けるものはありません。
それは単なる好み/文体的なものです。

12列未満->左揃え：

埋める列が12未満の場合、デフォルトでは左揃えになり、右側に空のスペースが残ります。

次のコード：

<div class='row'>
    <div class="col-xs-2">Hi</div>
    <div class="col-xs-2">Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

この結果：（ Demo in Fiddle ）

screenshot

12カラム以上->ラップ：

合計が12列を超える場合、列がrowクラス内にある限り、追加の行に折り返されます。良い使用例は、大量の写真を追加したいが、行の数がわからず、列の数を定義したい場合の写真グリッドシステムです。

次のコード：

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

この結果：（ Demo in Fiddle ）

screenshot2

それ以外では、12列のレイアウトの方が見栄えがよい場合がありますが、それらを使用する必要はありません。それは数独ではありません:)

40
KyleMit

4 * col-md-6は、中程度の画面に2つの「行」を作成します。すべてを.rowでラップしているため、期待どおりに機能します。あなたがそれを削除した場合、物事は互いに隣にネストします

例えば.

<div class="row">
  <div class="col-sm-2">Hello</div>
</div>
<div class="row">
  <div class="col-sm-2">Hello</div>
</div>

行の幅が100％であるため、親の行とそれぞれ16.67％幅で左に浮動する、それぞれ1列の2行が生成されます。列幅はcol-**-（number/12）によってパーセンテージで指定されます（2/12 = 0.166667）

<div class="col-sm-2">Hello</div>
<div class="col-sm-2">Hello</div>

は、親オブジェクトと同じ幅の16.667％である2列の1行を生成します。だからあなたがしたなら.rowを忘れる可能性があります

<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>

これにより、次のように作成されます：小画面（4行全幅列）中画面（2行2列各50％幅）大画面（1行4列各25％幅）

0
engineersmnky