使用引导程序删除所有大于 480 像素的屏幕尺寸上的 div答案

【问题标题】：Removing a div on all screen sizes greater than 480 px using bootstrap使用引导程序删除所有大于 480 像素的屏幕尺寸上的 div
【发布时间】：2014-05-06 13:14:20
【问题描述】：

我正在使用引导程序，我想在480px 或小于480px 上显示一个 div，但它应该在大于480px 的所有屏幕尺寸上不可见，如何使用媒体查询或任何其他技术来完成。请帮助我摆脱这个问题。

 @media screen and (max-width:768px) {
        #hidetop{
            display:none;
        }
        #showtop{display:block; }
        .reduce-margin
        {
        margin-top:0px; 


}
}

【问题讨论】：

你能发布一些代码或任何 jsfiddle 吗？ @用户...
我添加了媒体查询我正在使用什么
但我想在大于 480 像素的所有尺寸上隐藏此 #hidetop div 我将如何通过媒体查询编写它。

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在主 css 中，不显示该 div

#hidetop{display: none;}

然后在您的 responsive.css 中使用以下代码

@media screen and (max-width:480px) {

#hidetop{display: block;}

}

【讨论】：

【解决方案2】：

应该像下面这样简单，添加到您的 CSS 中。来自：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

.div {
  display: none;
}
@media (max-width: 480px) {
  .div {
    display: inline;
  }
}

【讨论】：

【解决方案3】：

试试下面的代码希望对你有帮助

#hidetop{
            display:none;
        }
@media (max-width:480px) {
    #hidetop {
        display: block;
    }
}

这里是 js 小提琴

http://jsfiddle.net/xf6gA/19/

【讨论】：

【解决方案4】：

您也可以使用最小宽度。少了一条 CSS 规则。

@media (min-width: 480px) {
    #hidetop {
        display: none;
    }
}

here 是一个很好的资源，可以帮助您了解可以使用媒体查询进行的其他操作。您可以组合条件，并使用非运算符。您甚至可以检测设备何时处于横向模式！

【讨论】：