Question

我正在尝试使用引导程序和C＃创建动态网格布局。

我要在HTML中实现的目标是这样的：

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>

基本上，这是一个在col-md-3 div周围包裹一个中继器。

我认为我有

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

    for (int i = 1; i <= products; i++)
    {
        bool startDiv = (i % (productsPerRow + 1) == 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>" : "");
    }

}

根据我认为的代码，它试图执行的操作是在到达<div class="row">时创建productsPerRow + 1，同时还要执行一次productsPerRow检查可将其整除。

然后，当我们到达productPerRow时，当然要通过附加</div>来关闭div。

但是，这并没有达到预期的效果，而是像这样打印：

  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>
<div class='row'>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>

我可能做错了什么？还有更简单的方法吗？

Answer 1

您错了，因为1 % 5是1，但是当i是1时，这是第一行，<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次，在第三次迭代中，nestede循环将运行4次（productsPerRow次），甚至认为仅剩一种产品。为了解决这个问题，我附加了一个名为productNum的变量，该变量用于存储当前产品的索引（用于计算其值的代码有点复杂；您可以对其进行调试并查看该变量的正确更改方式）。然后，在嵌套循环中，我还要检查是否没有完成产品迭代（productNum < products）。

Answer 2

我意识到这是一个古老的问题，但是今天我自己遇到了这个问题，并且在Chayim Friedman的编辑中发现了一个错误。我没有对此评论发表评论的声誉，但是如果这对其他人有帮助，我想添加它。

您只能在嵌套循环中遍历productNum。在外循环中添加它会导致您的productNum比实际模型数量高1，因此您将缺少一种产品（或其他）。

应该是这样的：

@{
  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++)
{
  <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>
}

动态引导网格布局

2 个答案:

编辑：