Boostrap卡循环剃须刀

问题描述：

我想创建一个HTML结构使用Bootstrap在哪里我会有4卡每行，但没有定义行div更多的只是一个容器，并在其中包括X卡，只是让它自动行 - 在桌面屏幕上打破4张卡片后，Boostrap卡循环剃须刀

原因是我将用剃刀创建一个循环，并从表中拉我的卡中的内容，但我不明白我怎么能循环如下：

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

答

要循环，你在上面显示的东西，你可以用一排，因为每个格列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

Boostrap卡循环剃须刀

相关推荐