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中手动进行操作，请尝试以下操作（将最小宽度更改为所需的大小）：

@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

Bootstrap 4打印使用中等断点

1 个答案: