web-dev-qa-db-ja.com

Bootstrap .w-100クラスを使用して行列を2行に分割するのはなぜですか（2行しか作成できないのですか）。

このページのBootstrapのドキュメント https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row この例：

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

これにより、各行に2つの同じサイズの列を持つ2つの行が作成されます。ただし、2つの行を作成するだけでこれを実現できます。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>

.w-100 CSSクラスを使用することと、代わりに2つの行を作成することとの間に違いはありますか？

twitter-bootstrapbootstrap-4twitter-bootstrap-4
15
Al Sweigart

この特定のケースでは、違いはありません。

ただし、単一の.rowにcolsを保持することは、これらの理由により一般的に優れています...

列の順序付け

代わりに、md以上の最初と最後の列の順序を切り替えたいとします。これは、個別の.rowコンテナでは不可能です。すべてのcolを単一の.rowに保持することで可能になります。

<div class="row">
    <div class="col flex-md-last">col 1</div>
    <div class="col">col 2</div>
    <div class="w-100"></div>
    <div class="col">col 3</div>
    <div class="col flex-md-first">col 4</div>
</div>

レスポンシブレイアウト

もう一つの例。代わりに次のレイアウトが必要だとします：

  • md幅（4x1）の1行に4列
  • xs幅（2x2）の2行にわたる2列

繰り返しますが、これは個別の.row divでは不可能です。ただし、w-100は応答的に使用できるため、すべての列を1行に保持することで可能です。

<div class="row">
    <div class="col col-md-3">col 1</div>
    <div class="col col-md-3">col 2</div>
    <div class="w-100 hidden-md-up"></div>
    <div class="col col-md-3">col 3</div>
    <div class="col col-md-3">col 4</div>
</div>

レイアウトのデモ

20
Zim