如何隐藏超小型设备的面板但仍显示面板的内容

Question

我在 twitter-bootstrap 面板中有 ASP 控件。在超小型设备上，我需要隐藏面板但仍显示 ASP 控件。如果我在面板上使用 hidden-xs class，那么控件也会被隐藏。有没有办法在不创建重复的 ASP 控件的情况下做到这一点？

<div class="panel panel-default hidden-xs">
    <div class="panel-heading">
        <div class="panel-title">Milestones</div>
    </div>
    <div class="panel-body">
        <asp:TextBox runat="server" ID="ShowMe" CssClass="form-control"/>
        <asp:TextBox runat="server" ID="Etcetera" CssClass="form-control"/>
    </div>
</div>

"sm"、"md"、"lg"的结果应该如下

而 "xs"

Answer 1

从 <div class="panel panel-default hidden-xs"> 中删除 hidden-xs 并将其添加到 <div class="panel-heading hidden-xs">

然后向面板添加另一个 class 名称，例如“hide-paddingAndBorder-xs” <div class="panel panel-default hide-paddingAndBorder-xs"> 现在您可以像这样添加媒体查询 @media (min-width:786px) { .hide-paddingAndBorder-xs{ /*Style here to remove padding and border*/} }

如何隐藏超小型设备的面板但仍显示面板的内容

How do I hide the panel for extra small devices but still show the content of the panel

asp.net

panel

hide

twitter-bootstrap