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

Question

这是我的示例代码，它根据浏览器的宽度在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>

Answer 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%;
  }

}