Boostrap Cards Loop Razor

Question

私は、行ごとに4枚のカードを持つBootstrapを使用してHTML構造を作成しようとしていますが、Row divを定義していないだけでコンテナの中にXカードを入れて、デスクトップ画面で4枚のカードを壊す

<div class="row"> 
<div class="col-sm-3">(MY CARD HTML)</div> 
<div class="col-sm-3">(MY CARD HTML)</div> 
<div class="col-sm-3">(MY CARD HTML)</div> 
<div class="col-sm-3">(MY CARD HTML)</div> 
</div> 
<div class="row"> 
<div class="col-sm-3">(MY CARD HTML)</div> 
<div class="col-sm-3">(MY CARD HTML)</div> 
<div class="col-sm-3">(MY CARD HTML)</div> 
<div class="col-sm-3">(MY CARD HTML)</div> 
</div> 

そのこれに対し：私はループを作成して、テーブルから私のカードの内容を引くためにかみそりを使用するつもりですが、私は、私はループを、次のことができますどのように表示されていないという

理由私はちょうど行を定義せずに私のCARD HTMLをかみそりでループすることができます。

<div class="card-deck"> 
(MY CARD HTML) 
(MY CARD HTML) 
(MY CARD HTML) 
(MY CARD HTML) 
<!--LINE/ROW BREAKS HERE--> 
(MY CARD HTML) 
(MY CARD HTML) 
(MY CARD HTML) 
(MY CARD HTML) 
</div> 

マイカミソリスクリプトのようなものになります：あなたは上に示したものをループに

<div class="card-deck"> 
@foreach (var row in CK.Cards("ID='" + TknParams.ID + "'")) { 
<div class="card"> 
    <img class="card-img-top" src="..." alt="Card image cap"> 
    <div class="card-block"> 
    <h4 class="card-title">@row.Title</h4> 
    <p class="card-text">@row.Description</p> 
    <a href="#" class="btn btn-primary">@row.Link</a> 
    </div> 
</div> 
} 
</div> 

Answer 1

を、あなたは1行を使用することができ、それぞれのdiv列が3であるので、場合には、新しい行に行くだろう12（3x4）に達する。このような何か：

<div class="card-deck"> 
    <div class="row"> 
    @foreach (var row in CK.Cards("ID='" + TknParams.ID + "'")) { 
    <!-- Display a div of col-sm-3 containing the card up to n number of times, ie in a loop --> 
    <div class="col-sm-3">(MY CARD HTML)</div> 
    } 
    </div> 
</div> 

サンプルフィドルhere

を参照してください。