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

【问题标题】：Bootstrap 4 CSS causing Chrome's print "Layout" to disappearBootstrap 4 CSS 导致 Chrome 的打印“布局”消失
【发布时间】：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;

【讨论】：