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

Question

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

例如，我希望.hidden-lg类排除iPad，1-3 / minis和其他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 {
...
}  

祝你好运！