使用Bootstrap，CSS打印媒体规则适用于Chrome，但不适用于Firefox

Question

我在样式表中添加了一些@media print个查询，以便在打印出来时尝试使内容更具吸引力和实用性（典型的东西：删除导航栏，交互式功能，打印链接）。这是我想要的Chrome，但不是Firefox和Safari。 （我正在浏览像this这样的网页）。

我写的规则不显示某些材料，但网格布局的行为有所不同：

火狐

铬

其他@print样式正在应用于两者，但Chrome会重现布局而不应用任何其他媒体规则（因此它出现在一列中 - 这就是我想要的）; Firefox没有。

我怀疑我的问题与Bootstrap一样多，因为它涉及@print查询本身。但在我开始编写@print规则以尝试重置Bootstrap的布局之前，我还应该了解一些关于浏览器如何构建打印页面的内容吗？是否有一个简单的解决方案可以确保其他浏览器生成类似Chrome的内容？

Answer 1

经过一些额外的探索，并找到this question之后，Chrome似乎将打印的页面宽度设置为小于768像素，因此Bootstrap使用xs样式。 This issue详细讨论了它。

我喜欢Chrome的（可能是奇怪的）行为;要在Firefox上保护它，需要重写引导规则。我想出的是这样的：

@media print {
 .col-sm-1,
 .col-sm-2,
 .col-sm-3,
 .col-sm-4,
 .col-sm-5,
 .col-sm-6,
 .col-sm-7,
 .col-sm-8,
 .col-sm-9,
 .col-sm-10,
 .col-sm-11,
 .col-sm-12 {
    float: none;
    width: 100%;
 }
}

我不确定明智如何解决这个问题，但似乎有效。