Bootstrap 4 CSS 导致 Chrome 的打印“布局”消失

Posted 2023-03-06

【中文标题】Bootstrap 4 CSS 导致 Chrome 的打印“布局”消失

【英文标题】：Bootstrap 4 CSS causing Chrome's print "Layout" to disappear

【发布时间】：2018-08-07 16:30:51

【问题描述】：

我希望我的网站用户能够以纵向或横向模式打印页面。

使用 Bootstrap 3.3.7 从 Google Chrome 打印时，Chrome 打印设置有一个布局选项。只需将 css/js 更改为 4.0.0，Chrome 打印设置不再具有 Layout 选项。我怀疑这与以下 CSS 指令之一有关：

@page
@media

【问题讨论】：

我在 Bootstrap 4 和 Chrome 上遇到了完全相同的问题，并且可以确认这可以解决它。您应该将您的修复复制到答案中并接受它。

这里有一个bug report。

Bootstrap 4.4 仍然是这种情况，可以在他们自己的页面上进行演示：getbootstrap.com/docs/4.4/getting-started/introduction

【参考方案1】：

我可以通过添加这个 CSS 来解决这个问题：

@page 
    size: auto;

【参考方案2】：

在 Bootstrap 4.5 下面的代码中，不要使用；

@media print  @page size: auto !important 

【参考方案3】：

在Bootstrap 4.4版本中，需要设置：

size: auto !important;