web-dev-qa-db-ja.com

Bootstrapビューポートに基づいて応答する4つのカードデッキテーブルセル列？

したがって、Bootstrap v4、カードデッキの新機能があることがわかります（ http://v4-alpha.getbootstrap.com/components/card/#decks ）これにより、カードのグループが作成され、その高さはグループの最も高いコンテンツに応じて同じになります。

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

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

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

編集-flexを使用しないようにしています/ flexboxによるIEサポート

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

csstwitter-bootstrapresponsive-designtwitter-bootstrap-4bootstrap-4
12
jpostdesign

私はcss-gridを使用してかなり簡単な回避策を見つけました。ユースケースに合わせて250pxを調整できます。

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
16
esitarz

2018を更新

card-deckとdisplay:table-cellを使用しているため、width:1%でカードの幅（レスポンシブ）を設定するのは困難です。

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

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

また、img-responsiveはimg-fluidに変更されました

ブートストラップ4.0.0

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

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

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

たとえば、xlで5、lgで4、mdで3、smで2などです。

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

10
Zim

さあ、どうぞ 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*/
}
5
Karl Doyle

ブートストラップ4カードデッキ対応

<container>、<row>および<col>応答性を高めますが、

すべてのカードは同じ高さです

カードデッキの機能（その場合）。 CSSが必要です。

.card-deck {
  margin: 0 -15px;
  justify-content: space-between;
}

.card-deck .card {
  margin: 0 0 1rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
    -ms-flex: 0 0 48.7%;
    flex: 0 0 48.7%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
  }
}

@media (min-width: 992px)
{
  .card-deck .card {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
  }
}

これが私のCodePenです： Bootstrap 4カードデッキ対応

2
FrankieDoodie

単にh-100グリッドのカードのクラス。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">1</div>
      <div class="card-footer"></div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">2a <br> 2b <br> 2c</div>
      <div class="card-footer"></div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">3</div>
      <div class="card-footer"></div>
    </div>
  </div>
</div>
1
kornieff

これを試して

<div class="container">
    <div class="card-deck">
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>

// Bootstrap 4 breakpoints & Gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-Gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-Gutter-width});
        }
    }
}

Codepenのデモ Bootstrap 4レスポンシブカードデッキ

0
Mohammad Ayoub Khan