如何在VB.NET中自动重新排列转发器?

时间:2015-12-15 07:36:05

标签: asp.net vb.net twitter-bootstrap

我正在使用VB.Net和Bootstrap中的转发器创建从SQL Server显示数据的UI。 我有5个中继器显示不同的数据。 我想让转发器显示如下:

enter image description here

如果添加或删除数据,转发器将自动重新排列。 如果添加或删除了数据库中的数据,我希望显示如下:

enter image description here

我试过这段代码:

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

但它显示如下:

enter image description here

如何使显示器显示为第一张图像?

0 个答案:

没有答案