for循環中的時間軸

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