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

Question

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

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

Answer 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 {
...
}  

祝你好运!