How to limit number of columns of card-deck?

问题

This is my code, what I want to achieve is only four columns in a row, and no more or less than that, but currently, the number of cards range from 1-10, they keep compressing until 10.

        <div class="card-deck-wrapper">
            <div class="card-deck">
                @foreach($resource->projects as $project)
                    <div class="card card-project">
                        bla bla (every card let's say is like this)
                    </div>
                @endforeach
            </div>
        </div>

回答1:

As explained in the docs, Card layouts (decks, groups and columns)...

"For the time being, these layout options are not yet responsive."

Therefor, you can't limit the cards per row in the card-deck. You could use grid columns instead, and flexbox if you need the cards to be equal height..

  <div class="row">
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          ... {repeat col-sm-3}..
  </div>

http://codeply.com/go/AP1MpYKY2H

As of Bootstrap 4 alpha 6: Flexbox is now the default so the extra CSS is no longer needed. Use h-100 to make the cards fill the height of the columns.

https://www.codeply.com/go/rHe6rq5L76 (updated demo for Bootstrap 4.1)

回答2:

You can limit number of cards in one row with .cards-columns

<<div class="card-columns">
<div class="card-deck-wrapper">
         <div class="card-deck">
            @foreach($resource->projects as $project)
                <div class="card card-project">
                    bla bla (every card let's say is like this)
                </div>
            @endforeach
        </div>
    </div>
 </div>

And in css:

 .card-columns {
 @include media-breakpoint-only(lg) {
  column-count: 4;
  }

More https://v4-alpha.getbootstrap.com/components/card/#decks

来源：https://stackoverflow.com/questions/38895106/how-to-limit-number-of-columns-of-card-deck

标签

twitter-bootstrap

frontend

twitter-bootstrap-4