动态引导网格布局

您错是因为1 % 51，但是当i1时这是第一行，<div>应该是。因此，代替i % (productsPerRow + 1)使用(i - 1) % productsPerRow：

@{
    int productsPerRow = 4;
    int products = 8;

    for (int i = 1; i <= products; i++)
    {
        bool startDiv = ((i - 1) % productsPerRow  == 0);

        @Html.Raw(startDiv ? "<div class='row'>" : "");

        @Html.Raw("<div class="col-md-3"></div>");

        bool endDiv = (i % productsPerRow == 0) || (i != 1 && i == productsPerRow);
        @Html.Raw(endDiv ? "</div>" : "");
    }

}

但是我认为使用嵌套循环会更漂亮：

@{
  const int productsPerRow = 4;
  int products = 8;
  const int rows = (int)Math.Ceiling((double)products / productsPerRow); // Because if one products need one more row, we should one more row, so I round up
}

@for (int i = 0, productNum = 0; i < rows; i++, productNum++)
{
  <div class="row">
    @for (int j = 0; j < productsPerRow && productNum < products; j++, productNum++)
    {
      <div class="col-md-3">@productsArr[productNum]</div>
      @* This is an example how to access the products if stored in an array via nested loop *@
    }
  </div>
}

编辑：

先前的版本有一个错误-例如，如果有9个产品，rows则将分配给3，外部循环将运行3次，在第三次迭代中，嵌套循环将运行4次（productsPerRow次），甚至认为只剩下一种产品。为了解决这个问题，我附加了一个名为的变量productNum，该变量存储当前产品的索引（用于计算其值的代码有些复杂；您可以对其进行调试并查看该变量的正确更改方式）。然后，在嵌套循环中，我还要检查是否没有完成迭代的产品（productNum < products）。