[英]asp.net gridView - responsive webform
I created a GridView that is somewhat responsive.我创建了一个有点响应的 GridView。 After i scale the browser to a certain point it doesnt stack like it would on a mobile device.
在我将浏览器缩放到某个点后,它不会像在移动设备上那样堆叠。 what do i need to add to my gridViews to get them to display nicely on a mobile device?
我需要添加什么到我的 gridViews 才能让它们在移动设备上很好地显示?
<section id="no-more-gridView">
<asp:GridView ID="GridView1" CssClass="table table-bordered table-hover table-responsive-xl w-100 align-self-auto" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Height="296px" Width="886px" AllowSorting="True" BorderStyle="Groove" HorizontalAlign="Center" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<AlternatingRowStyle BackColor="#CCFFFF" />
<Columns>
<asp:BoundField DataField="Row#" HeaderText="Row#" SortExpression="Row#" />
<asp:BoundField DataField="Number" HeaderText="Number" SortExpression="Number" />
<asp:BoundField DataField="Person" HeaderText="Person" SortExpression="Person" />
<asp:BoundField DataField="Reason" HeaderText="Reason" SortExpression="Reason" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
<HeaderStyle HorizontalAlign="Center" CssClass="table table-primary"/>
</asp:GridView>
</section>
As noted, by defualt, bootstrap should be working.如前所述,默认情况下,引导程序应该可以工作。
To allow that gridview to REALLY crunch down, and re-size REALLY nice?让 gridview 真正缩小,重新调整大小真的很好吗?
I suggest this:我建议这样做:
class="table table-hover table-fixed"> class="table table-hover table-fixed">
The fixed really does a great job - it seeks to try and fix the column sizes.固定确实做得很好 - 它试图尝试修复列大小。
Thus on a 1920 BIG monitor, I get this:因此,在 1920 BIG 显示器上,我得到以下信息:
But, resized as VERY small - easy to fit on a phone?但是,调整为非常小 - 易于安装在手机上? You get this:
你得到这个:
Now we gone from 1920 down to 517 pixels.现在我们从 1920 像素降到了 517 像素。
I don't think you can get much better crunching down then say the above.我不认为你可以比上面说的更好。 And if you need smaller yet, then I don't think bootstrap or any responsive framework going to help you all that much.
如果您还需要更小,那么我认为引导程序或任何响应式框架都不会对您有太大帮助。
So, I did above with this:所以,我在上面做了这个:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" class="table table-hover table-fixed">
I do find that table-fixed seems to do about the best here, but you could try a few other settings:我确实发现 table-fixed 似乎在这里做得最好,但您可以尝试其他一些设置:
Say this:说这个:
class="table table-responsive"
So give both a try.所以两个都试试。 The last one is quite much what most use - and it also does a really great job at re-sizing.
最后一个是最常用的——它在重新调整大小方面也做得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.