Html 使用Bootstrap，CSS打印媒体规则可以在Chrome上工作，但不能在Firefox上工作

我在样式表中添加了一些

@media print

查询，以使打印出来的内容更具吸引力和实用性（典型的内容：删除导航栏、交互式功能、打印链接）。它在Chrome上按我所希望的方式工作，但在Firefox和Safari上却不行。（我正在拍摄这样的页面）

我编写的规则不显示某些材质，但栅格布局的行为不同：

火狐

铬

附加的

@print

样式将应用于这两种样式，但Chrome在不应用任何其他媒体规则的情况下复制版面（因此它出现在一列中，这正是我想要的）；Firefox没有

---

我怀疑我的问题不仅是关于

@print

查询本身，也是关于引导的。但是，在我开始编写

@print

规则来重置引导程序的布局之前，我是否应该了解浏览器如何构建打印页面？是否有一个简单的解决方案可以确保其他浏览器生成类似于Chrome的内容？

在进行了一些额外的探索之后，发现Chrome似乎将打印的页面宽度设置为小于768像素，因此引导程序使用xs样式。详细讨论了它

我喜欢铬的（也许是奇怪的）行为；要在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%;
 }
}

我不确定这是一个多么明智的解决方案，但它似乎正在发挥作用