Javascript 如何使用bootstrap 4在移动设备上隐藏gridview列？

我有一个gridview，我想使用bootstrap在mobile/tablet视图中隐藏一列（例如生日。请查看代码）。如何实现？我找到了一个解决方案，但使用了引导3。先谢谢你

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellSpacing="-1" HorizontalAlign="Center" Height="80px" Width="800px" AutoGenerateColumns="False" EnableModelValidation="True" OnPageIndexChanging="GridView1_PageIndexChanging">
    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center" />
    <Columns>
        <asp:BoundField DataField="EmployeeID" HeaderText="Employee">
            <HeaderStyle BorderColor="#CC9966" />
        </asp:BoundField>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Surname" HeaderText="Surname" />
        <asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

根据此问题

---

在表格单元格上设置显示类将产生奇怪的结果。最好在内容上使用它。您可以使用TemplateFields，并在HeaderText和Content中使用具有正确类的

span

元素

<asp:GridView ID="GridView1" AutoGenerateColumns="false" CssClass="table table-striped" GridLines="None" runat="server" ItemType="NameSpace1.Book">
    <Columns>
        <asp:TemplateField HeaderText="Always Visible">
            <ItemTemplate>
                <%# Item.id %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-md-none'>Visible on Mobile</span>">
            <ItemTemplate>
                <span class="d-md-none"><%# Item.Name %></span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-none d-md-block'>Visible on Desktop</span>">
            <ItemTemplate>
                <span class="d-none d-md-block"><%# Item.date.ToLongDateString() %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

你好，我的朋友。正如我所料，谢谢你。但是列的标题没有隐藏。我已经更新了答案来隐藏标题，这应该可以满足您的需要。

<asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
    <ItemStyle CssClass="d-none d-md-block d-lg-block d-xl-block" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

<asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
    <HeaderStyle CssClass="d-none d-md-block d-lg-block d-xl-block"></HeaderStyle>
    <ItemStyle CssClass="d-none d-md-block d-lg-block d-xl-block" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

<asp:GridView ID="GridView1" AutoGenerateColumns="false" CssClass="table table-striped" GridLines="None" runat="server" ItemType="NameSpace1.Book">
    <Columns>
        <asp:TemplateField HeaderText="Always Visible">
            <ItemTemplate>
                <%# Item.id %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-md-none'>Visible on Mobile</span>">
            <ItemTemplate>
                <span class="d-md-none"><%# Item.Name %></span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-none d-md-block'>Visible on Desktop</span>">
            <ItemTemplate>
                <span class="d-none d-md-block"><%# Item.date.ToLongDateString() %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>