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:

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