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

Question

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

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

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

我想要宽度：自动；对于 768 到 992 像素之间的 "modal-dialog modal-lg" 个屏幕。所以我在 css:

中尝试

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

但这不适用。

然后，我用谷歌搜索了这样的东西：

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

但这也会覆盖@media（最小宽度：992px）。如何覆盖仅（最小宽度：768px）规则？

Answer 1

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

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

!important 应该不是必需的，除非你必须覆盖另一个 !important :)

How to remove only one media rule property from external css