使用 asp.net mvc Razor 的 Bootstrap 中的项目概述

【问题标题】：Overview of items in Bootstrap with asp.net mvc Razor使用 asp.net mvc Razor 的 Bootstrap 中的项目概述
【发布时间】：2017-06-05 15:00:18
【问题描述】：

我正在使用引导程序并显示项目网格。我连续显示 6 个项目。

目前我在下面有这段代码，代码可以工作，但代码的味道很糟糕。

@{ int rowcnt = 0; }
@for (int i = 0; i < Model.Count; i++)
{  
    if (rowcnt % 6 == 0)
    {
        @Html.Raw("<div class=\"row\">")
    }

    <div class="col-md-2 col-xs-6 col-sm-6">
        <div class="myItemContainer">
            <!-- fancy item stuff -->
        </div>
  </div>
    rowcnt++;
    if (rowcnt % 6 == 0)
    {
        @Html.Raw("</div>")
    }
}
@*for-loop end*@
@if (rowcnt % 6 != 0)
{
    @Html.Raw("</div>")
}

有没有更好的方法来使用引导程序来执行此操作，而无需计算插入 div 的行数？

我测试只是创建 col- 元素，但有时会创建奇怪的行，其中只有一个项目。

item item item item
item
item item item item
item
item item item item
item
...

【问题讨论】：

• 嗨，你能告诉我你最想达到的目标吗？
• 使用引导程序创建一个网格，例如单行 6 个项目。假设我有 100 个项目，那么我想查看 17 行（16 行，每行 6 个项目，另外一行包含剩余项目）。目前它可以工作，但是我自己添加

  元素时 razor 中的代码看起来很糟糕。我想知道是否有更好/更清洁的方法。
• 如果您只想在标记中使用原始 HTML，只需在没有 Html.Raw 帮助器的情况下编写它。这就是 Razor 的美妙之处 - 您可以混合使用 C# 和 HTML 语法。
• 更简洁的语法 - <div class"row">@for (int i = 0; i < Model.Count; i++){if (i > 0 && i % 6 == 0){@:</div><div class"row">}<div class="col-md-2 col-xs-6 col-sm-6">.....</div></div>
• 所以唯一真正的“选择”就是放弃引导网格系统并使用 flex.... :-)