在Bootstrap中覆盖mediaquery css规则

Question

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

请注意，我不想从DOM中删除任何类，并且正在寻找使用.parent (我可以向该元素添加任何类)来覆盖其子呈现规则的解决方案。

换句话说，我想强制bootstrap以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%;
  }

}