Question

如何使用datalist进行以下布局？我正在使用Bootstrap和datalist以及ASP.NET。它得到了布局，但由于边距只显示3列。不知道怎么办？

|---------| |---------| |---------| |---------|
| Image   | | Image   | | Image   | | Image   |
| 300x450 | | 300x450 | | 300x450 | | 300x450 |
|         | |         | |         | |         |
|         | |         | |         | |         |        
|---------| |---------| |---------| |---------|      
| name    | |name     | |name     | |name     |
| price   | |price    | |price    | |price    |
|---------| |---------| |---------| |---------|

|---------| |---------| |---------| |---------|
| Image   | | Image   | | Image   | | Image   |
| 300x450 | | 300x450 | | 300x450 | | 300x450 |
|         | |         | |         | |         |
|         | |         | |         | |         |        
|---------| |---------| |---------| |---------|      
| name    | |name     | |name     | |name     |
| price   | |price    | |price    | |price    |
|---------| |---------| |---------| |---------|

我确实尝试过这样做，下面你会找到我的代码：

<asp:DataList ID="repeaterGrid" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" cssClass="row">
    <ItemTemplate>
        <div class="text-center col-lg-3 col-md-4 col-sm-6 col-xs-12 img-thumbnail" style="height:400px;padding:0px;margin-right:40px;border:1px solid black;">
        <asp:Image ID="ImageI" runat="server" src='<%# Eval("Picture_Path") %>' style="height:100%;" /> <br/>
        <asp:Label ID="NameL" runat="server" Text='<%# Eval("Name") %>' />  <br/>
        <asp:Label ID="PriceL" runat="server" Text='<%# Eval("Price") %>' />
        </div>
    </ItemTemplate>
</asp:DataList>

Datalist - 如何将Bootstrap与datalist一起使用？

0 个答案: