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

Question

我创建了一个有点响应的 GridView。 在我将浏览器缩放到某个点后，它不会像在移动设备上那样堆叠。 我需要添加什么到我的 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>

Answer 1

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

让 gridview 真正缩小，重新调整大小真的很好吗？

我建议这样做：

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

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

因此，在 1920 BIG 显示器上，我得到以下信息：

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

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

我不认为你可以比上面说的更好。 如果您还需要更小，那么我认为引导程序或任何响应式框架都不会对您有太大帮助。

所以，我在上面做了这个：

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

我确实发现 table-fixed 似乎在这里做得最好，但您可以尝试其他一些设置：

说这个：

class="table table-responsive"

所以两个都试试。 最后一个是最常用的——它在重新调整大小方面也做得很好。