匹配 Bootstrap -xs、-sm 等修饰符的媒体查询？ [复制]

Posted 2023-03-06

【中文标题】匹配 Bootstrap -xs、-sm 等修饰符的媒体查询？ [复制]

【英文标题】：Media Query to Match Bootstrap -xs, -sm, etc. modifiers? [duplicate]

【发布时间】：2015-08-31 17:42:16

【问题描述】：

我正在尝试编写一个媒体查询来匹配使用hidden-xs 或visible-sm 显示/隐藏的相同项目。什么样的媒体查询可以做到这一点？或者我如何根据这些修饰符有条件地居中（例如）？

【参考方案1】：

根据您的 Bootstrap 帮助程序类，逻辑上您可以使用以下媒体查询。

.hidden-xs 定位 768px 内的元素并将其隐藏，.visible-md 将定位在 768px 以上和 992px 内。

可见-sm

@media (min-width: 768px) and (max-width: 992px) 
  .center-block 
    display: block;
    margin-left: auto;
    margin-right: auto;
  

Hidden-xs

@media (max-width: 768px) 
  .center-block 
    display: block;
    margin-left: auto;
    margin-right: auto;