我正在使用Asp Repeater创建一些内容,例如图库。目前,图库显示如下。
IMG1
IMG2
IMG3
IMG4
但是我需要每行四张图像。如果超过四个,则转到新行。我可以使用此thread的解决方案来实现此目的,但是它没有响应。如何在ASP中继器中使用bootstraps col-md-4。
这是我期望的结果。
在桌面视图上。
IMG1 IMG2 IMG3 IMG4
IMG5 IMG6 IMG7 IMG8
在移动设备视图上
IMG1
IMG2
IMG3
IMG4
IMG5
...
这是我当前的html。
<table>
<asp:Repeater id="rptTest" runat="server">
<ItemTemplate>
<%# (Container.ItemIndex + 5) % 5 == 0 ? "<tr>" : string.Empty %>
<td style="padding-right:10px;padding-bottom:20px;">
<div class=" col-md-12 agile_ecommerce_tab_left">
<div class="hs-wrapper">
<img src='<%# Eval("Imgthumb") %>' class="img-responsive img-thumbnail" />
<div class="w3_hs_bottom">
<ul>
<li>
<a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
<h5><a href="single.html"><%# Eval("Title") %></a></h5>
<div class="simpleCart_shelfItem">
</div>
</div>
</td>
<%# (Container.ItemIndex + 5) % 5 == 4 ? "</tr>" : string.Empty %>
</ItemTemplate>
</asp:Repeater>
</table>