14

Bootstrap Grid の行と列の特定のポイントを明確にする必要があります。このリンク: http://getbootstrap.com/css/#grid ; 概要の下の 3 番目のポイントは、「コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます」と述べています。

これは正確にはどういう意味ですか？私がやろうとしているのは、2 つの列を配置することです: col-xs-4、col-xs-8; それ自体が行の内側にある col-xs-12 の内側。これは機能しますか..

<div class="row">
<div class="col-xs-12">
    <div class="col-xs-4">some content</div>
    <div class="col-xs-8">some other content</div>
</div>

または、xol-xs-12 内に新しい (そしてネストされていると思われる) 行を挿入し、その行に他の 2 つの列を挿入する必要がありますか?

4

4 に答える 4

23

ブートストラップの行と列 - 行を使用する必要がありますか?

はい、行を使用する必要があります。

2018年アップデート

そのrow>col関係はBootstrap 3 と 4の両方で同じです..

「列のみが行の直接の子になることができます」

したがって、ネストされた列 ( .col-*)も 内にある必要.rowがあります。

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

ここでわかるように、常にrow. これはBootstrap 4では非常に重要です。これは、列が の中に配置されていない場合 、列が単純に垂直方向にスタック (ラップ)されるためです。両側に 15px の負のマージンがあるため、利点は...row.row

  • 100% 幅のコンテンツの内側container
  • コンテンツを行に分割する (列を強制的にオンラインにする)
  • グリッド row>col をネストし、外側の位置合わせを維持します

Bootstrap 3 ドキュメントから...

コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。

Bootstrap 4 ドキュメントから...

行は列のラッパーです。各列には、それらの間のスペースを制御するための水平パディング (ガターと呼ばれます) があります。このパディングは、負のマージンを持つ行で打ち消されます。このようにして、列内のすべてのコンテンツが左側に視覚的に配置されます...コンテンツは列内に配置する必要があり、列のみが行の直接の子になる場合があります。

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

于 2014-02-26T21:10:47.160 に答える
2

<div class="row">使用するには親が必要です<div class="col-*>

このようなもの

<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-4">some content</div>
      <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>
于 2014-02-26T21:11:05.067 に答える