Bootstrap 4 card deck table-cell columns responsive based on viewport?

问题

So in Bootstrap v4, I see there's a new feature for card decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) that makes a group of cards, with their height equal according to the tallest content in the group.

It appears the number of columns are based on how many card-div's are in the group. Is there a way to make the number of columns change based on the viewport? For example, 4 columns / card wide at large width, 2 wide at medium width, and 1 at small width?

Currently they stay the same number of columns/cards wide until less than 544px. At 544px and greater, they have display: table-cell with the screen (min-width: 544px) rule.

Is there a way to make the cards have different numbers of columns based on viewport by changing only the CSS?

Edit - Looking to not use flex / flexbox due to IE support

Codepen example of 4 col/card wide and 3 col/card wide at http://codepen.io/jpost-vlocity/full/PNEKKy/

回答1:

I found a pretty easy workaround using css-grid. You could tweak the 250px to fit your use case.

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

回答2:

Update 2019

It's hard to set the cards widths (responsive) with card-deck because it uses display:table-cell and width:1%.

I found it easier to make them responsive using the cards inside the Bootstap grid col-* and then you can use the grid viewport breakpoints. Enable Bootstrap's flexbox if you want the cards to be equal height like the card-deck.

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

Also, img-responsive has changed to img-fluid

Bootstrap 4.0.0

Flexbox is now the default, but there is still not a supported way to make responsive card-deck's. The recommended way is to use cards inside the grid:

Responsive cards using grid

Another way to make a responsive card-deck, is using responsive reset divs every x columns. This will force cards to wrap at specific breakpoints.

For example: 5 on xl, 4 on lg, 3 on md, 2 on sm, etc..

Responsive card deck demo (4.0.0)
Responsive card deck demo (alpha 6)
CSS pseudo elements variation

回答3:

Here you go, http://codepen.io/KarlDoyle/pen/pypWbR

The main thing is that you have to override the styles. as shown below.

.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*/
}

回答4:

Bootstrap 4 card deck responsive

I tried to use the <container>, <row> and <col> to make it responsive, but you lose the

All the cards have the same height

feature of the card deck, if you do that. What you need is 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%;
  }
}

Here is my CodePen: Bootstrap 4 card deck responsive

回答5:

Simply drop h-100 class on cards in grid.

<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>

回答6:

Try this

<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});
        }
    }
}

Demo on codepen Bootstrap 4 responsive card-deck

来源：https://stackoverflow.com/questions/36487389/bootstrap-4-card-deck-table-cell-columns-responsive-based-on-viewport