html - Bootstrap 4 打印使用中等断点

Question

我最近更新了一些页面以使其更适合移动设备，但问题是我们的一些用户打印页面并且他们使用中等断点(平板电脑样式)而不是桌面样式进行打印。它在纵向和横向中都这样做，并且在 firefox 和 chrome 中都会发生

我想使用大断点打印页面，但我不知道该怎么做。

我什至已经有了以下集合:

@media print {
    body {
        min-width: 992px !important;
    }
}

Desktop sample

Print sample

示例 jsfiddle:

https://jsfiddle.net/jz56frqh/2/show

Answer 1

在 bootstrap variables.scss 中有改变打印大小的变量:

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

如果您想在 CSS 中手动执行此操作(将 min-width 更改为您想要的大小):

@media print {
  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

scss 引用:https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss