15

そのため、Bootstrap v4 では、カードのグループを作成するカード デッキ ( http://v4-alpha.getbootstrap.com/components/card/#decks ) の新しい機能があり、その高さは最も高いコンテンツに応じて等しくなります。グループで。

列の数は、グループ内の card-div の数に基づいているようです。ビューポートに基づいて列数を変更する方法はありますか? 例えば大幅で4段・カード幅、中幅で2幅、小幅で1段？

現在、544px 未満になるまで、同じ数の列/カード幅のままです。544px 以上ではdisplay: table-cell、screen (min-width: 544px)ルールが適用されます。

CSS のみを変更して、ビューポートに基づいてカードの列数を変える方法はありますか?

編集 - IE をサポートしているため、flex / flexbox を使用しないことを検討しています

http://codepen.io/jpost-vlocity/full/PNEKKy/ の 4 列/カード幅および 3 列/カード幅の Codepen の例

4

6 に答える 6

15

2019年アップデート

とcard-deckを使用するため、カードの幅 (レスポンシブ) を設定するのは困難です。display:table-cellwidth:1%

Bootstap グリッド内のカードを使用してレスポンシブにする方が簡単でcol-*、グリッド ビューポート ブレークポイントを使用できます。のようにカードを同じ高さにしたい場合は、Bootstrap のフレックスボックスを有効にしますcard-deck。

http://www.codeply.com/go/6eqGPn3Qud

またimg-responsive、img-fluid

ブートストラップ 4.0.0

Flexbox がデフォルトになりましたが、レスポンシブ カードデッキを作成する方法はまだサポートされていません。推奨される方法は、グリッド内でカードを使用することです。

グリッドを使用したレスポンシブ カード

レスポンシブなカード デッキを作成するもう 1 つの方法は、 x列ごとにレスポンシブなリセット div を使用することです。これにより、カードが特定のブレークポイントで折り返されます。

例: xl では 5、lg では 4、md では 3、sm では 2 など。

レスポンシブ カード デッキのデモ ( 4.0.0 )
レスポンシブ カード デッキのデモ (アルファ 6)
CSS 疑似要素のバリエーション

于 2016-04-08T12:13:24.000 に答える
4

ほら、 http://codepen.io/KarlDoyle/pen/pypWbR

主なことは、スタイルをオーバーライドする必要があるということです。以下に示すように。

.card-deck {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap; 
  align-items: stretch;
}
.card-deck .card {
  display: block;
  flex-basis: 33.3%; /* change this value for each breakpoint*/
}
于 2016-04-07T22:18:54.377 に答える