css - 覆盖 Bootstrap 规则

Question

我按此顺序加载我的 CSS

<link href="bootstrap.min.css" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

来自 bootstrap.css:

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

来自 print.css:

.modal-dialog {
    width: 100% !important;
}

但在打印预览中宽度仍然是 600px!

其他一切都是可以覆盖的，比如填充等，但不能覆盖这个 div 的宽度。

Answer 1

Bootstrap CSS 是一种媒体查询，比您编写的打印 CSS 更具体。这个特定的媒体查询样式元素适合平板电脑或更大的屏幕——任何屏幕尺寸大于 768 像素的东西。因为 Bootstrap 模态的父元素没有显式设置宽度，通过将打印 CSS 宽度设置为 100%，您告诉 block 元素使用其默认行为，即占据其容器的整个宽度.宽度在 Bootstrap CSS 中明确设置为 600px，因此您需要覆盖它。通常，为 block 元素设置 width: 100% 是多余的，因为这是它们的默认行为。阅读更多关于 CSS 100% 宽度的信息 here .

您可以编写自己的媒体查询来覆盖 Bootstrap 默认值，也可以设置固定宽度(以像素/em 为单位)。

所以，像这样:

.modal-dialog {
    max-width: 500px; /* or whatever width you like */
}

或者:

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