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>

生成一个长<row>。但是没有自动包装，你必须自己将它分解成行。

假设学生是列表＆lt;＆gt;

// 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>
}

填充项目时引导网格布局问题

1 个答案: