创建对象列表并将其显示为切片

Question

现在我正在制作这个

我希望他们下次能像3x3立方体一样

以下代码生成图像中的内容。

<div class="container" style="border: 1px solid blue; padding: 10px">
@foreach (var m in Model.FilteredMatches)
{
 <div class="span3">
 <a href=@Url.Action("Details", "Member", new { id = m.UserId }) class="thumbnail">
 <div class="span4 " style="border: 1px solid red; padding: 10px">
 <img src="@m.Photo.PhotoURL" class="img-responsive " style="max-height:300px;max-width:200px"/>
  </div>
 <div class="span2 " style="border: 1px solid black; padding: 10px">
 <h5>@m.Username</h5>
<h5>@m.Age year old @m.Gender.WhatGender | Seeking</h5>
<h5>@m.City, @m.State.Name,@m.State.Country.Name</h5>
</div>
 </a>
 </div>
 }
</div>

我也不确定为什么bootstrap不会将span放在彼此旁边。

Answer 1

你有一堆div s，它们是块元素，默认情况下不会彼此相邻显示。您可以为这些宽度添加，然后将float: left;添加到CSS中。您的另一个选择是将div实际更改为span。

Answer 2

@foreach (var m in Model.FilteredMatches)
{        
<div class="span3 pull-left">
     <a href=@Url.Action("Details", "Member", new { id = m.UserId }) class="thumbnail">
          <div class="span4 " style="border: 1px solid red; padding: 10px">
              <img src="@m.Photo.PhotoURL" class="img-responsive " style="max-height:300px;max-width:200px"/>
         </div>
          <div class="span2 " style="border: 1px solid black; padding: 10px">
              <h5>@m.Username</h5>
              <h5>@m.Age year old @m.Gender.WhatGender | Seeking</h5>
              <h5>@m.City, @m.State.Name,@m.State.Country.Name</h5>
         </div>
     </a>
</div>
}

在上面的代码中添加了左上角div，它完全符合我的要求。