Question

我正在使用bootstrap在我的第一个移动网站上工作。我正在尝试创建一个响应的Listview，我做了一些研究，我需要选择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，使其成为一个范围，或者使它成为一个表格，就像我从@mshsayem链接的帖子的选定答案

如果你只是想在一行中显示图像，你可以放它们在一行的列中。尝试重写listview标记如下（将table，tr标记移至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项目，其中layout = flow水平且响应迅速。我希望有人觉得它很有用。

    <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，流水线布局水平显示

2 个答案: