web-dev-qa-db-ja.com

Bootstrap行と列-行を使用する必要がありますか？

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

これは正確にはどういう意味ですか？私がやろうとしているのは、col-xs-4、col-xs-8の2つの列を配置することです。それ自体が行の内側にある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内に新しい（そしてネストされた..iと思われる）行を挿入してから、その行の他の2つの列を挿入する必要がありますか？

twitter-bootstraptwitter-bootstrap-3bootstrap-4
13
Rahul Patwa

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

はい、need行を使用します。

2018年の更新

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

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

したがって、ネストされた列（.col-*）mustも.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を使用する必要があります。これはveryBootstrap 4で重要です。これは、列が単にスタック（ラップ）するためです。 .row内に配置されていない場合は垂直方向。 .rowは、両側に15pxの負のマージンがあるため、利点があります。

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

Bootstrap 3 Docs ..から.

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

Bootstrap 4 Docs ..から.

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

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

17
Zim

<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>
2
Mo.