カードデッキの列数を制限する方法は？

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では、1行あたりのカード数を制限することはできません。余分なCSSですので、フレキシボックスは、デフォルトである：あなたが同じ高さにカードが必要な場合は、更新ブートストラップ4アルファ6

<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

...グリッドの代わりに、列、およびフレキシボックスを使用することができます不要になりました。

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