asp.net gridView - 响应式网页表单

Question

我创建了一个具有一定响应能力的 GridView。当我将浏览器缩放到某个点后，它不会像在移动设备上那样堆叠。我需要向我的 gridView 添加什么才能让它们在移动设备上很好地显示？

        <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>

Answer 1

如前所述，默认情况下，引导程序应该可以工作。

让网格视图真正压缩，并重新调整大小真的很好吗？

我建议这样：

class="table table-hover table-fixed">

fixed 确实做得很好 - 它试图尝试修复列大小。

因此，在 1920 年的大显示器上，我得到了这个：

但是，调整大小为非常小 - 易于安装在手机上吗？你得到这个：

现在我们从 1920 像素下降到 517 像素。

我不认为你能比上面说的更好地处理问题。如果您还需要更小的尺寸，那么我认为 bootstrap 或任何响应式框架都不会为您提供太大帮助。

所以，我做了上面的事情：

 <asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False" class="table table-hover table-fixed">
   

我确实发现表固定似乎在这里做得最好，但你可以尝试一些其他设置：

这样说：

class="table table-responsive"

所以两者都尝试一下。最后一个是最常用的 - 而且它在调整大小方面也做得非常出色。

Answer 2

由于响应能力而放弃 Web 表单是没有意义的，改变 Web 框架总是涉及一个人们可能不一定愿意投资的学习曲线。虽然阿尔伯特的解决方案可能有所帮助，但随着屏幕尺寸的减小，它的效果可能会降低。我建议用单个 TemplateField 替换所有 BoundField；这种方法将为有效应用 Bootstrap 并实现所需的输出提供灵活性。