Как ограничить количество столбцов карточной колоды?

Question

Это мой код, которого я хочу достичь, всего четыре столбца подряд, и не более того, но в настоящее время количество карт варьируется от 1 до 10, они продолжают сжимать до 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> 

Answer 1

Вы не можете ограничить количество карточек в строке в card-deck. Вы можете использовать столбцы сетки вместо этого, и Flexbox если вам нужны карты, чтобы быть равной высоте ..

<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

Update Bootstrap 4 альфа 6: Flexbox теперь по умолчанию, поэтому дополнительный CSS является больше не нужен.

Answer 2

Вы можете ограничить количество карт в одном ряду с .cards-столбцами

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

И в CSS:

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

Больше https://v4-alpha.getbootstrap.com/components/card/#decks