web-dev-qa-db-ja.com

bootstrapで行あたりの列数を調整するにはどうすればよいですか？

Bootstrap v4alphaを使用して、グリッドの下にキャプション付きの24枚の画像をレイアウトしようとしています。タイルをキャプション付きの画像と呼びましょう。

1）<table>タグを使用して上下に整列する場合と同じように、タイルを垂直方向と水平方向に整列させたい。私の写真は同じサイズですが、キャプションの長さが異なります。

2）列数は画面サイズに応じて調整されます。小さな画面では、2列と12行になります。中程度の画面では、3列×4行。大画面では、4列と3行。

Cards Columns を試してみましたが、石積みの外観を除いて、ほとんど必要なものです。それらも列に並べてほしい。

グリッドオプション をcol-sm-6、col-md-4、およびcol-lg-3で試しましたが、問題は、固定数のタイルを内にラップする必要があるという事実にあります。タグ<divclass = "row">。

この問題は以前のバージョンのBootstrapにも存在しますが、v4に特定の解決策がある場合は、それも知りたいと思います。

csstwitter-bootstrapresponsive-designmultiple-columns
8
Quoc Vu

すべての.col-*-*を1つの<div class="row">...</div>でラップするだけです。コンテンツは必要に応じて折り返されます。

さて、他の質問については、各画面サイズの各行に正確に12列あることを確認する必要はありません。列が収まらなくなった場合（たとえば、.col-*-11の次に.col-*-2がある場合）、前の行が100％いっぱいでなくても、自動的に次の行に移動します。

Bootstrapのドキュメント から抜粋した別の例

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

ここで.col-4は列10〜13を導入しますが、列が12しかないため、div全体が次の行に移動します。

ブートストラップ4

フィドル を作成して、これがBootstrap 4でどのように機能するかを示します。 v4のグリッドシステムはflexboxに基づいており、flexboxでは、使用可能なすべての垂直スペースを使用するようにアイテムが拡大します。つまり、列の行では、各列が最も高い柱と同じ高さになります。

これはBootstrap 3との大きな違いであり、コンテンツのさまざまな高さを補正する必要がないことを意味します。

ブートストラップ3

私はもともとBootstrap 3に基づいて答えましたが、いくつかの違いがあるので、それを必要とする人のために、ここでも元の答え（わずかに変更）を保持します。

Bootstrap 3）では、.rowを完全に省略し、.containerをすべての.col-*-*の親として使用できます。

this fiddle をチェックして、.rowを使用する場合と.rowを使用しない場合の違いを確認できます。画像のグリッドをレイアウトします。結果フレームの幅を調整し、下にスクロールして、3つの画像が連続している場合の違いを確認します。もちろん、1つの.rowを使用して、すべての.colを内部に配置することもできます。

さまざまなコンテンツの高さを補正する

ただし、Bootstrap 3はflexboxの代わりにfloatを使用するため、列の高さが同じでない場合、次の列が前の列の最も高い要素の右側から始まる可能性があるという問題が発生します。画面の左側から開始する場合は、前のすべての要素の下に要素をプッシュするには、これらのフロートをクリアする必要があります。

Bootstrap 3はこのためのクラスを提供し、フロートをクリアしたいときはいつでも<div class="clearfix">を挿入できます。さらに、フロートをクリアしたくない画面サイズのdivを非表示にする必要があります。これを実現するには、クラス.hidden-*を使用できます。

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

  <!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
  <div class="clearfix hidden-md hidden-lg"></div>

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

  <!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
  <div class="clearfix hidden-sm hidden-lg"></div>

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

繰り返しますが、私は fiddle を作成して、すべての動作を示しました。

14
mmgross