具有水平流布局显示的.Net Listview

Question

我正在使用 bootstrap 开发我的第一个移动网站。我正在尝试创建一个响应式的 Listview，我做了一些研究，我需要 select Layout= Flow 但我的问题是这个布局从上到下（一列）流动。我需要能够从左到右显示最多 4 个项目，但我无法让它工作。

代码

    <asp:ListView ID="ProductsListView"  DataSourceID="SqlDataSource1"  runat="server" DataKeyNames="ID">

    <LayoutTemplate >
        <div ID="itemPlaceholderContainer" runat="server" style="">
            <span runat="server" id="itemPlaceholder" />
        </div>
        <div style="">
        </div>
    </LayoutTemplate>


    <ItemTemplate>
        <span style="">ID:
        <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
        </span>
    </ItemTemplate>

  </asp:ListView>

Answer 1

看来您遇到了与该用户相同的问题。

horizontal list view in asp.net

LayoutTemplate 包含块级元素（div）。这意味着 ItemTemplate 将被包裹在 div 中，它将占据整个可用宽度。

您应该能够从 LayoutTemplate 中删除 div，使其成为一个跨度，或者使其成为 table，就像我从中链接的 post 的选定答案中一样@mshsayem

If you just want to show the images in a single row, you can just put them in the columns of a single row. Try rewriting the listview markup as follows (move table,tr markups into LayoutTemplate):
<asp:ListView runat="server" ID="PageHorizon">
  <LayoutTemplate>
      <table>
      <tr>
         <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
      </tr>
      </table>
  </LayoutTemplate>
  <ItemTemplate>  
          <td>
              <img src='<%#Eval("ImagePath")%>' alt="Single Image"  
              width="64px" height="64px" />
          </td>       
  </ItemTemplate>
</asp:ListView>

Answer 2

下面的脚本显示布局为水平流动的 Listview 项，并且它是响应式的。我希望有人觉得它有用。

    <div style=" text-align: center;">

                <!-- start listview-->

                 <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">


                    <LayoutTemplate >
                    <div ID="itemPlaceholderContainer" runat="server" >
                        <span runat="server" id="itemPlaceholder" />
                    </div>

                   </LayoutTemplate>


                    <EmptyDataTemplate>
                        <span>No data was returned.</span>
                    </EmptyDataTemplate>

                    <ItemTemplate>

                    <table style="display: inline-block;" >

                     <tr >
                                <td colspan="3">
                                    <asp:Image ID="Image1" runat="server" Height="200px" 
                                        ImageUrl='<%# Eval("Picture") %>' Width="150px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    <span style="background-color: #FFFBD6;color: #333333;">
                                    <asp:Label ID="OrderOfferNameLabel" runat="server" 
                                        Text='<%# Eval("WHATEVER") %>'></asp:Label>
                                    </span>
                                </td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    <span style="background-color: #FFFBD6;color: #333333;">
                                    <asp:Label ID="ProductNameLabel" runat="server" 
                                        Text='<%# Eval("WHATEVER") %>'></asp:Label>
                                    </span>
                                </td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <asp:Button ID="Button1" runat="server" Height="44px" 
                                        style="height: 26px; width: 56px" Text="Button" Width="380px" />
                                </td>
                            </tr>

                    </table>


                    </ItemTemplate>

                </asp:ListView>

         </div>

具有水平流布局显示的.Net Listview

.Net Listview with flow layout display horizontally

c#

asp.net

mobile

responsive-design

twitter-bootstrap