我正在使用VB.Net和Bootstrap中的转发器创建从SQL Server显示数据的UI。 我有5个中继器显示不同的数据。 我想让转发器显示如下:
如果添加或删除数据,转发器将自动重新排列。 如果添加或删除了数据库中的数据,我希望显示如下:
我试过这段代码:
<div class="col-md-6 col-sm-12">
<asp:Repeater ID="rptr1" runat="server">
<HeaderTemplate>
<div class="row">
<div class="box">
<div class="box-header">
<h3>Repeater 1</h3>
</div>
<div class="box-content">
<ul class="dashboard-list">
</HeaderTemplate>
<ItemTemplate>
<li>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field1") %></a></strong><br>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field2") %></a></strong><br>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
</ div>
<div class="col-md-6 col-sm-12">
<asp:Repeater ID="rptr2" runat="server">
<HeaderTemplate>
<div class="row">
<div class="box">
<div class="box-header">
<h3>Repeater 2</h3>
</div>
<div class="box-content">
<ul class="dashboard-list">
</HeaderTemplate>
<ItemTemplate>
<li>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field1") %></a></strong><br>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field2") %></a></strong><br>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
</ div>
<div class="col-md-6 col-sm-12">
<asp:Repeater ID="rptr3" runat="server">
<HeaderTemplate>
<div class="row">
<div class="box">
<div class="box-header">
<h3>Repeater 3</h3>
</div>
<div class="box-content">
<ul class="dashboard-list">
</HeaderTemplate>
<ItemTemplate>
<li>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field1") %></a></strong><br>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field2") %></a></strong><br>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
</ div>
<div class="col-md-6 col-sm-12">
<asp:Repeater ID="rptr4" runat="server">
<HeaderTemplate>
<div class="row">
<div class="box">
<div class="box-header">
<h3>Repeater 4</h3>
</div>
<div class="box-content">
<ul class="dashboard-list">
</HeaderTemplate>
<ItemTemplate>
<li>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field1") %></a></strong><br>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field2") %></a></strong><br>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
</ div>
<div class="col-md-6 col-sm-12">
<asp:Repeater ID="rptr5" runat="server">
<HeaderTemplate>
<div class="row">
<div class="box">
<div class="box-header">
<h3>Repeater 5</h3>
</div>
<div class="box-content">
<ul class="dashboard-list">
</HeaderTemplate>
<ItemTemplate>
<li>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field1") %></a></strong><br>
<strong><a href="#"><%# DataBinder.Eval(Container.DataItem, "Field2") %></a></strong><br>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
</ div>
但它显示如下:
如何使显示器显示为第一张图像?