gpt4 book ai didi

jquery - Bootstrap GridView 列显示/隐藏无法按照移动/选项卡/桌面工作

转载 作者:行者123 更新时间:2023-12-01 04:42:25 24 4
gpt4 key购买 nike

Small - 2

Large -1

当我将屏幕移动为小、中、大 View 时,但它没有完美地隐藏/显示列。在大 View 列中应该显示全部,因此这里只显示ID和名称列,其他 View 是相同的。

这是我的代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="mainContainer" class="container">
<div class="shadowBox">
<div class="page-container">
<div class="container">
<div class="jumbotron">
<p class="text-danger">Responsive GridView in ASP.NET </p>
<span class="text-info">Desktop Tablet Phone Different layout </span>
</div>
<div class="row">
<div class="col-lg-12 ">
<div class="table-responsive">
<asp:GridView ID="grdCustomer" runat="server" Width="100%" CssClass="table table-striped table-bordered table-hover" AutoGenerateColumns="False" DataKeyNames="Id" EmptyDataText="There are no data records to display.">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" ItemStyle-CssClass="visible-xs" HeaderStyle-CssClass="visible-xs" />
<asp:BoundField DataField="Salary" HeaderText="Salary" SortExpression="Salary" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />
<%-- <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />
<asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" HeaderStyle-CssClass="visible-md" ItemStyle-CssClass="visible-md" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />--%>
</Columns>
</asp:GridView>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

我请求您的帮助。

最佳答案

使用Bootstrap responsive classes跨视口(viewport)断点切换内容,您必须使用 .visible-x-y,其中:

  • x 是屏幕尺寸(即xssmmd , lg, xl)
  • y 是 CSS display 属性值(即 blockinlineinline-block )

您的 HeaderStyle-CssClassItemStyle-CssClass 缺少“y 部分”。

关于jquery - Bootstrap GridView 列显示/隐藏无法按照移动/选项卡/桌面工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35082387/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com