如何从外部css中只删除一个媒体规则属性

Question

我有bootstrap.min.css，它定义：

@media (min-width: 768px) .modal-dialog {
    width: 600px;
    margin: 30px auto; 
}

@media (min-width: 992px) .modal-lg {
    width: 900px;
}

我想要宽度:自动；用于“模态-对话模式-lg”屏幕之间的768至992 to。因此，我尝试在我的css：

@media (min-width: 768px) .modal-dialog {
    width: auto !important;
}

但这并不适用。

然后，我在谷歌上搜索了这样的内容：

@media (min-width: 768px) {
  body .modal-dialog {
      width: auto !important;
  }
}

但这也覆盖了@media (最小宽度:992 But )。如何仅覆盖(最小宽度:768 to )规则？

Answer 1

这个媒体查询应该实现您所要求的内容。设置要应用所需更改的最小宽度和最大宽度。

@media (min-width: 768px) and (max-width: 992px) {
    .modal-dialog {
        width: auto;
    }
}

除非您必须覆盖另一个!important :)，否则不应该使用!important：)