有没有办法将自定义媒体查询(即 iPad Mini 1-3 版)添加到 Bootstrap 3 响应实用程序类?
例如,我希望 .hidden-lg
类排除 iPad、1-3/mini 和其他 768x1024 设备。
最佳答案
理论上这很简单,您使用媒体查询来定位特定设备,然后编写您的 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 {
...
}
祝你好运!
关于css - 将自定义媒体查询添加到 Bootstrap 3 响应实用程序类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24707760/