Question

我正在尝试使用Bootstrap框架和MVC填充时间轴。信息存储在数据库中，我以Tuple<List<T>>的形式返回数据。目前在视图的for循环中，我可以填充时间轴，但所有项目都在左侧。

我的问题是，我如何填充时间轴，以便通过添加bootstrap css类timeline-inverted在左侧和右侧有一个项目？

这就是我现在所拥有的。

for(int i = 0; i < Model.FullAttchmentList.Item2.Count; i++)
{
<ul class="timeline">
<li>
  <div class="timeline-panel">
     <div class="timeline-heading">
        <h4 class="timeline-title">@Model.FullAttchmentList.Item2[i].AttachmentName</h4>
     </div>
     <div class="timeline-body">
        @Html.Image(Model.FullAttchmentList.Item2[i].Thumbnail)
     </div>
     <hr />
     <div class="btn-group">
        <button type="button" class="btn btn-primary">Download File</button>
     </div>
  </div>
</li>
<li class="timeline-inverted"> //this is where I want to add my second item
  <div class="timeline-panel">
     <div class="timeline-heading">
        <h4 class="timeline-title">@Model.FullAttchmentList.Item2[i].AttachmentName</h4>
     </div>
     <div class="timeline-body">
        @Html.Image(Model.FullAttchmentList.Item2[i].Thumbnail)
     </div>
     <hr />
     <div class="btn-group">
        <button type="button" class="btn btn-primary">Download File</button>
     </div>
  </div>
 </li>
</ul>
}

Answer 1

您可以使用模数运算符来确定奇数/偶数。像...这样的东西。

for(int i = 0; i < Model.FullAttchmentList.Item2.Count; i++)
{
<ul class="timeline">
  @if (i % 2 == 0) {
  <li>
  } else {
  <li class="timeline-inverted">
  }
  <div class="timeline-panel">
     <div class="timeline-heading">
        <h4 class="timeline-title">@Model.FullAttchmentList.Item2[i].AttachmentName</h4>
     </div>
     <div class="timeline-body">
        @Html.Image(Model.FullAttchmentList.Item2[i].Thumbnail)
     </div>
     <hr />
     <div class="btn-group">
        <button type="button" class="btn btn-primary">Download File</button>
     </div>
  </div>
</li>
</ul>
}

for循环中的时间轴

1 个答案: