html - 填充元素时 Bootstrap 网格布局问题

Question

我是 MVC5 的新手，尤其是使用 Bootstrap。我正在尝试创建一个网站，其中第一页应该有一个带有学生图像的网格。现在看起来像这样。我想每行有 5 张图像，但我还没有弄清楚如何(它是 4 或 6)。 此外，当行之间没有空间并且图像粘在一起时。

我正在用我的学生模型中的元素填充网格。

  <div class="col-md-10">
            <div class="row">

                @foreach (var item in Model.Students)
                {

                    <div class="col-md-2">


                                <a href="@Url.Action("Edit", "Students", new {studentId = item.StudentId})">
                                    <img src="../../@item.ProfileImagePath" alt="Profile Image" />
                                </a>
                            </div>


                }
            </div>
        </div>

我没有完全理解 Bootstrap 网格是如何工作的，尤其是当我用动态数据填充它时。现在的网站是这样的 http://imgur.com/5fLRZeM

Answer 1

你有

 <div class="row">
       @foreach (var item in Model.Students)
       {
             <div class="col-md-2">
             ...
             </div>
       }
 </div>

生成一个 long <row> .但是没有自动换行，你必须自己把它分成几行。

假设 Students 是一个列表<>

// roughly, untested
@for(int r = 0; r < Model.Students.Count; r += 5)
{
  <div class="row">  
  @for (int s = r; s < r+5; s += 1)
  {
     <div class="col-md-2">
       // do stuff with Model.Students[s]
     </div>
  }
  </div>
}