asp.net vb中的响应列表视图 [英] Responsive listview in asp.net vb

问题描述

我使用下面的代码来显示带有图片的项目，它的工作正常但无法使其与移动设备兼容，我希望在移动设备上查看时显示单个列。在桌面上它正确显示4列

I have used the below code to show the items with image , its working fine but not able to make it mobile compatible , i want to show a single column when it is viewed on mobile .in desktop it properly shows 4 columns

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <style type="text/css">
        .container
        {
            display: table;
            width: 100%;
        }
        
        .row
        {
            height: 100%;
            display: table-row;
        }
        .col-sm-3
        {
            display: table-cell;
        }
           </style>
    <div class="form-group">
      <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"

        GroupItemCount="4" ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">
        <layouttemplate>
            <div class="container">
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1">
               <div class="row">
                  <div class="col-sm-3">
                    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvCustomers" PageSize="50">
                        <fields>
                            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"

                                ShowNextPageButton="false" />
                            <asp:NumericPagerField ButtonType="Link" />
                            <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"

                                ShowPreviousPageButton="false" />
                        </fields>
                    
                </div>
             </div>
          </div>
        </layouttemplate>
        <grouptemplate>
            <div class="row">
                <div class="col-sm-3">
                    <asp:PlaceHolder runat="server" ID="itemPlaceHolder1">
                </div>
            </div>
        </grouptemplate>
        <itemtemplate>
       <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <asp:Image ID="picAlbum" runat="server" AlternateText='<% #Eval("acc_name") %>' ImageUrl='<%# "ShowImage1param.ashx?id=" + Eval("ac_id") %>' />
                    <br />
                    <asp:HyperLink ID="HyperLink4" runat="server" align="right" NavigateUrl='<%#Eval("ac_id")%>'

                        Target="_blank" Font-Bold="True" Text='<%#Eval("ac_id")%>'>
                    <br />
                    <%# Eval("acc_name")%>
                    <br />
                    <%# Eval("acc_group")%>
                    <br />
                    <asp:Label ID="Label6" runat="server" Text='<%#Eval("comp_name")%>'>
                    <br />
                    <asp:HyperLink ID="HyperLink1" runat="server" align="right" NavigateUrl='<%#Eval("comp_website")%>'

                        Target="_blank" Font-Bold="True" Text='<%#Eval("comp_website")%>'>
                    <br />
                    <asp:Label ID="Total" runat="server" Text='<%#Eval("comp_address")%>'>
                </div>
            </div>
            </div> 
        </itemtemplate>
    
    </div>

我的尝试：



我尝试过col-sm-4但是当我改变它时它只显示桌面和移动设备和平板电脑的单列中的所有记录。

What I have tried:

I have tried col-sm-4 but but when i change the same it shows all the records only in single column for desktop and mobile and tablet .

推荐答案

看看这个 - 使用jQuery在ASP.Net中显示移动电话，平板电脑和桌面的Bootstrap响应中继器 [ ^ ]。



希望这会有所帮助!!!

Take a look at this - Bootstrap Responsive Repeater for Mobile Phone, Tablet and Desktop display in ASP.Net using jQuery[^].

Hope this helps!!!

这篇关于asp.net vb中的响应列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！