我一直在使用媒体查询来使用响应式 CSS,目前我正试图在以 480 像素查看时隐藏某些表格内容。我在名为“hideOnSmall”的 CSS 中创建了一个名为“hideOnSmall”的类,然后将标签添加到“位置”的模板字段中,但我还没有让它真正起作用,所以我一定是做错了什么我已经查找了执行此操作的方法以及所有消息来源让我明白了这一点,但如果有人能发现我遗漏的任何东西,或者我做错了什么。
CSS:
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 20px;
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-left: 10px;
padding-right: 10px;
}
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
.media-object {
margin-right: 0;
margin-left: 0;
}
.modal {
top: 10px;
left: 10px;
right: 10px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}
.hideOnSmall {
display: none !important;
}
}
HTML
<asp:TemplateField HeaderText="Location" SortExpression="locationName" ItemStyle-CssClass="hideOnSmall">
<EditItemTemplate>
<asp:DropDownList ID="DropDownLocations" runat="server" DataSourceID="SqlDSLocations" DataTextField="locationName" DataValueField="locationID" SelectedValue='<%# Bind("locationID") %>'></asp:DropDownList>
<asp:SqlDataSource ID="SqlDSLocations" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [locationID], [locationName] FROM [tblLocation]"></asp:SqlDataSource>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("locationName") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("locationName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>