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％，您可以告诉块元素使用其默认行为，即完全占用容器的宽度。在Bootstrap CSS中，宽度显式设置为600px，因此您需要覆盖的内容。通常，块元素的设置宽度：100％是多余的，因为它们是默认行为。阅读有关CSS 100％宽度here的更多信息。

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

所以，比如：

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

或者：

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

覆盖引导规则

1 个答案: