카드 데크의 열 수를 제한하는 방법은 무엇입니까?

Question

이것은 내 코드입니다. 달성하고자하는 것은 연속으로 4 열이고 그 이상이나 이하는 아니지만 현재 카드의 수는 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

업데이트 부트 스트랩 4 알파 6 : 여분의 CSS는 그래서 인 flexbox은 이제 기본입니다 더 이상 필요 없어요.

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