Boostrap卡循环剃须刀

Question

我正在尝试使用Bootstrap创建HTML结构它在桌面屏幕上的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

要循环您上面显示的内容，您可以使用一行，因为每个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>

请参阅此处的样本小提琴