将自定义媒体查询添加到 Bootstrap 3 响应式实用程序类答案

【问题标题】：Adding custom media queries to Bootstrap 3 responsive utility classes将自定义媒体查询添加到 Bootstrap 3 响应式实用程序类
【发布时间】：2015-03-19 22:44:29
【问题描述】：

有没有办法将自定义媒体查询（即 iPad Mini 版本 1-3）添加到 Bootstrap 3 响应式实用程序类？

例如，我希望 .hidden-lg 类排除 iPad、1-3/minis 和其他 768x1024 设备。

【问题讨论】：

你可以为宽度添加自定义媒体查询，是这个意思吗？

标签： css twitter-bootstrap responsive-design media-queries

【解决方案1】：

理论上这很简单，您可以使用媒体查询来定位特定设备，然后编写 CSS 来覆盖内置的 Bootstrap 行为。

你会在网上找到资源来帮助你进行媒体查询，为了让你开始，你可以试试http://cssmediaqueries.com/target/

因此，例如，使用上面来源的媒体查询来定位 iPad mini 上的 .hidden-lg 类，您可以从以下开始：

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {

.hidden-lg {
        display: initial !important
    }
}

在覆盖 Bootstrap 样式时，CSS specificity 的标准规则将适用。您可能需要向选择器添加额外的属性，以便您的新规则优先，例如

#custom-content .hidden-lg {
...
}

祝你好运！

【讨论】：