在 Bootstrap 中覆盖媒体查询 css 规则

Posted 2023-03-06

【中文标题】在 Bootstrap 中覆盖媒体查询 css 规则

【英文标题】：Overriding mediaquery css rules in Bootstrap

【发布时间】：2021-11-10 16:52:51

【问题描述】：

这是我的示例代码，它根据浏览器的宽度在md-12 或sm-6 中显示#data。在某些情况下（比如我想要实现并由 JS 触发的特殊预览模式）我想覆盖 #data 渲染规则，即使在小屏幕上也只渲染 col-md-12。

请注意，我不想从 DOM 中删除任何类，并寻找使用 .parent（我可以向该元素添加任何类）来覆盖其子渲染规则的解决方案。

换句话说，我想强制引导程序以md 模式显示内容并忽略浏览器的宽度。

我也想知道这个问题是否可以通过改变viewport的值来解决？

<div class="parent">
    <div class="row">
        <div id="data" class="col-md-12 col-sm-6">data</div>
    </div>
</div>

【参考方案1】：

元素如何知道自己处于特殊状态？

您是否在.parent 元素（例如.preview）或其父元素之一上动态添加类？ 如果是这样，一个可能的解决方案可能是定义一个具有更高特异性的 css 规则，例如 .preview #data，您可以在其中设置属性，如 .col-md-12（或仅需要恢复的那些）。

以下是可能的示例：

/* media query of .col-sm-6 */
@media (min-width: 576px)  

  /* this is if you only need to override #data element */
  .preview #data 
    /* properties from .col-md-12 */
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  

  /* this is if you need to override all occurences of .col-sm-6 inside a .preview element */
  .preview .col-sm-6 
    /* properties from .col-md-12 */
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  

【讨论】：

是的，我可以向.parent 添加课程。你的意思是我需要为preview 类重新定义引导md 和sm 规则？

是的，您可以使用更高特异性的选择器重新定义sm 规则，这将覆盖原始sm 之一，但仅当.preview 类应用于父元素时。当您删除 .preview 类时，将恢复原始行为。我编辑了我的答案以显示一些示例。