Question

我试图使用Bootstrap创建一个HTML结构，其中我每行有4张卡但没有定义Row div更多只是一个容器并且在其中包含X卡并且只是让它自动换行后桌面屏幕上有4张卡片。

原因是我要使用Razor创建一个循环并从表中提取我的卡片内容，但我不知道如何循环以下内容：

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

查看示例小提琴here

Boostrap Cards Loop Razor

1 个答案: