在打印网站反应组件时，如何设置用于布局的react-bootstrap断点的宽度？

问题描述

我们有一个react应用程序，希望用户能够轻松干净地打印网站上的各个页面。我们的应用程序使用react-bootstrap网格来处理响应性。这是我们其中一个页面的摘要，其中包括两个表。这些表在顶部图像中并排（基于bar和xl断点，它们使用大小为6的两列），并堆叠在底部图像中（基于{ {1}}断点，大小= 12）。

第一张图片

第二张图片

当我按CMD + P启动打印窗口时，此页面的此部分包含2个表，我收到以下消息：

无论浏览器当前的宽度如何，打印窗口始终显示堆叠的两个表。但是，对于打印，我希望两个表并排放置而不是堆叠在一起。

是否可以控制/更改打印机所感知的页面“宽度”？我假设当前打印功能只是将页面视为属于lg断点的某个宽度，但是使用md或（首选）{{1} }断点。

解决方法

假设您将这样的内容作为标记：

<div class="row row-of-tables">
    <div class="col col-12 col-md-12 col-lg-6 col-xl-6">Table 1</div>
    <div class="col col-12 col-md-12 col-lg-6 col-xl-6">Table 2</div>
</div>

打印时，下面的代码将使max-width中的50%占用col-lg-6或col-xl-6一样

@media print {
    .row.row-of-tables > .col {
        max-width: 50%;
    }
}