如何在ASP.NET中创建一个具有响应性的2列的数据列表？ [英] How to create a datalist in ASP.NET with 2 columns which is responsive?

问题描述

我想在asp中有一个带有多个列的数据列表，我从后面的代码中传递它的数据源，我已经正确完成了这是我的代码：

 <   asp：DataList     runat   = 服务器    ID   =  dlCustom    RepeatColumns   =  4 >  
 <   itemtemplate  >  
 < span class =code-keyword><   div     class   =  col-md-12 >  
 <   div    类  =  pricing-head >  
 <   h3  >  <   label   >  <％＃DataBinder.Eval（Container.DataItem， 客户名称）％> <   / label  >  <   / h3  >  <   / div  >  
 <   div  >  <   / div  >  
 <  < span class =code-leadattribute> div  >  <  标签 >  <％＃DataBinder.Eval（Container .DataItem，  CustomerDet）％> <   / label< / div  >  
 <   / div  >  

但它没有响应。我希望当我调整网页大小时，2或3列更改为一列，这不会发生！如果我应该使用另一个组件，请帮助我。



我尝试过：



我不知道应该用什么来使其响应。

解决方案

默认情况下， DataList [ ^ ]将其项目呈现为< table> ，会破坏您的响应式设计。



您可以更改 RepeatLayout 属性为流，删除< table> ，但它会渲染项目组之间的换行符。



使用 ListView [ ^ ]。

 <   asp; ListView     ID   =  dlCustom    runat   =  server >  
 <   layoutTemplate  >  
 <   div     class   = 行 >  
 <   asp：占位符    ID   =  itemPlaceholder    runat   =  server  /  >  
 <   / div  >  
 <   / layoutTemplate  >  
 <   itemTemplate  >  
 <   div     class   =  col-md-4 col-lg-3 >  
 <！ -     
 4列@ 1170px或更宽; 
 3栏@ 970px  -  1169px; 
 1列@ 969px或更窄
    - >   
 ... 
 <   / div  >  
 <   / itemTemplate  >  
 <   / asp：ListView  > ;  

I want to have a datalist in asp with more than one column and I pass its data source from code behind and I've done it correctly and this is my code :

 <asp:DataList runat="server" ID="dlCustom" RepeatColumns="4">
        <itemtemplate>
            <div class="col-md-12">
                <div class="pricing-head">
                  <h3><label><%# DataBinder.Eval(Container.DataItem,"CustomerName") %></label></h3></div>
  <div></div>
 <div><label><%# DataBinder.Eval(Container.DataItem, "CustomerDet") %></label</div>
</div>

but it is not responsive .I want that when I resize the webpage 2 or 3 columns change to one column and this wouldn't happen ! plz help me if I should use another component even.

What I have tried:

I don't know what should I use to get it responsive.

解决方案

By default, the DataList[^] renders its items in a <table>, which breaks your responsive design.

You can change the RepeatLayout property to Flow, which removes the <table>, but it will then render line breaks between groups of items.

You'd probably have better luck using a ListView[^] instead.

<asp;ListView ID="dlCustom" runat="server">
<layoutTemplate>
    <div class="row">
        <asp:placeholder ID="itemPlaceholder" runat="server"/>
    </div>
</layoutTemplate>
<itemTemplate>
    <div class="col-md-4 col-lg-3">
        <!-- 
        4 columns @ 1170px or wider; 
        3 columns @ 970px - 1169px; 
        1 column @ 969px or narrower 
        -->
        ...
    </div>
</itemTemplate>
</asp:ListView>

这篇关于如何在ASP.NET中创建一个具有响应性的2列的数据列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！