Css 覆盖引导规则

我按此顺序加载CSS

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

从print.css：

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

但仍在打印预览中，宽度为600px

---

其他所有内容都可以覆盖，如填充等，但不包括该分区的宽度。

引导CSS是一个媒体查询，它比您编写的打印CSS更具体。此特定的媒体查询设置元素样式，以适合平板电脑或更大的屏幕—屏幕大小大于768px的任何内容。由于引导模式的父元素没有显式的宽度设置，通过将打印CSS宽度设置为100%，您告诉块元素使用其默认行为，即占用其容器的全部宽度。在引导CSS中，宽度被显式设置为600px，因此您需要覆盖它。通常，为块元素设置宽度：100%是多余的，因为这是它们的默认行为。阅读更多关于CSS 100%宽度的信息

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

比如说：

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

或：

---

引导CSS是一种媒体查询，它比您编写的打印CSS更具体。此特定的媒体查询设置元素样式，以适合平板电脑或更大的屏幕—屏幕大小大于768px的任何内容。由于引导模式的父元素没有显式的宽度设置，通过将打印CSS宽度设置为100%，您告诉块元素使用其默认行为，即占用其容器的全部宽度。在引导CSS中，宽度被显式设置为600px，因此您需要覆盖它。通常，为块元素设置宽度：100%是多余的，因为这是它们的默认行为。阅读更多关于CSS 100%宽度的信息

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

比如说：

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

或：

---

---

有没有可能

模态对话框的某个父级只有600px宽，所以将其设置为100%没有效果？您可以发布完整的JSFIDLE代码吗？我回答得太早了，代码错了。@MarkPolivchuk，没有一个家长是600px宽的。在F12开发人员工具中，当我取消选中此特定规则时，容器将变为100%。仅供参考，您可以使用开发人员工具模拟页面上的打印媒体类型，而不是使用打印预览。这样，您可以像平常一样检查元素、查看css规则等，这与打印预览不同。你确定你的print.css样式表被应用了吗？在开发人员工具中取消选中600px规则将导致元素占据其父元素可用宽度的100%，无论
print.css
是否正确加载。（这是块元素的默认行为。）是否有可能
模态对话框的某个父级仅为600px宽，因此将其设置为100%没有效果？您可以发布完整的JSFIDLE代码吗？我回答得太早了，代码错了。@MarkPolivchuk，没有一个家长是600px宽的。在F12开发人员工具中，当我取消选中此特定规则时，容器将变为100%。仅供参考，您可以使用开发人员工具模拟页面上的打印媒体类型，而不是使用打印预览。这样，您可以像平常一样检查元素、查看css规则等，这与打印预览不同。你确定你的print.css样式表被应用了吗？在开发人员工具中取消选中600px规则将导致元素占据其父元素可用宽度的100%，无论
print.css
是否正确加载。（这是块元素的默认行为。）是否有可能
模态对话框的某个父级仅为600px宽，因此将其设置为100%没有效果？您可以发布完整的JSFIDLE代码吗？我回答得太早了，代码错了。@MarkPolivchuk，没有一个家长是600px宽的。在F12开发人员工具中，当我取消选中此特定规则时，容器将变为100%。仅供参考，您可以使用开发人员工具模拟页面上的打印媒体类型，而不是使用打印预览。这样，您可以像平常一样检查元素、查看css规则等，这与打印预览不同。你确定你的print.css样式表被应用了吗？在开发人员工具中取消选中600px规则将导致元素占据其父元素可用宽度的100%，无论
print.css
是否正确加载。（这是块元素的默认行为。）不应该！重要限定符覆盖css关于应用哪种样式的任何特殊性规则？为True，但在本例中，它没有预期的结果。在上面John的代码中，是！重要的限定符是将宽度设置为100%，100%是由媒体查询设置的600px。在这种情况下，您需要使用固定的宽度，或者提供像素的最小或最大宽度。百分比不是这样工作的。百分比表示“父元素的百分比”，而不是“上一个适用css规则设置的任何宽度的百分比”：这是正确的，但是如果父元素具有显式宽度，则将宽度设置为100%只会强制子元素占据父元素宽度的100%。在本例中，element.modal对话框没有具有显式宽度的父级，因此将宽度设置为100%除了重申媒体查询中设置的显式宽度外没有任何作用。您可以阅读更多关于使用百分比作为宽度的内容，但不完全如此。诚然，当父对象在该维度中没有确定的长度时，百分比不起作用，但是用百分比覆盖显式值仍然会导致使用的是百分比值，而不是确定值：不应该！重要限定符覆盖css关于应用哪种样式的任何特殊性规则？为True，但在本例中，它没有预期的结果。在上面John的代码中，是！重要的限定符是将宽度设置为100%，100%为600px，如图所示
@media (min-width: 768px) {
    .modal-dialog {
        width: 500px !important;
    }
}