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>

來源

2017-09-23 UserSN

要循環，你在上面顯示的東西，你可以用一排，因爲每個格列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

來源

2017-09-25 15:25:54 Laiman

Boostrap卡循環剃鬚刀

回答

相關問題