在每行三列中显示项目列表答案

【问题标题】：Display list of items in column of three per row在每行三列中显示项目列表
【发布时间】：2021-08-13 11:07:03
【问题描述】：

我有一个来自我的 C# Rest Api 的 c# 模型列表。前端应该有一行三列，下一组三列，依此类推。

我该怎么做。我试过了，但它不显示其他数据。

@{ var i = 0; }
@foreach (var employee in Model.Employees)
{
    @{ i++; } 
    <a href="#">@employee.Name</a>
    @if(i%3 == 2)
    {
        <br/>
    }
}

【问题讨论】：

试试 (i % 3 == 0) ?另一种方法是使用然后当 if (i % 3 == 0) 插入

@slacker 请注意这仍然是一行，我需要为模型中的每个项目单独行

你能描述一下你的模式吗？模型中还有哪些其他项目？

标签： c# model-view-controller

【解决方案1】：

使用引导程序！

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row">
      @foreach (var employee in Model.Employees)
      {
         <div class="col-sm-4">
             <a href="#">@employee.Name</a>
         </div>
      }
   </div>
</div>

</body>
</html>

在这种情况下，由于每行需要 3 名员工，所以一整行将是 col-sm-12，所以我只是将 12 除以 3，即 4，所以我使用 col-sm-4。

【讨论】：

请注意这仍然是一行，我需要为模型中的每个项目单独行
当您不断在行中添加数据时，一旦该行中的数据为 3，它就会像这样继续移动到下一行。

【解决方案2】：

你可以使用下面的代码

@{  
    var i = 0;            
    foreach (var employee in Model.Employees)
    {
        i++;
        <a href="#">@employee.Name</a>
        if (i == 3)
        {
            i=0;
            <br />
        }
     } 
}

【讨论】：