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"

所以兩個都試試。 最后一個是最常用的——它在重新調整大小方面也做得很好。