使用媒体查询隐藏表格内容

时间:2013-04-06 23:04:14

标签: asp.net html css media-queries

我一直在使用媒体查询来使用自适应CSS,目前我正试图在480px上查看时隐藏某些表格内容。我在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>

0 个答案:

没有答案