React项目打印时如何设置react-bootstrap断点宽度实现并排布局？

这个问题我之前做项目时也碰到过——浏览器的打印预览逻辑和普通页面不一样，它不会直接继承当前窗口的宽度来计算响应式断点，所以哪怕你浏览器窗口是xl宽度，打印时还是可能触发md甚至更小的断点，导致表格堆叠。不过咱们可以通过CSS打印媒体查询来搞定，给你几个实用的方案：

方案一：模拟lg/xl断点的页面宽度 #

核心思路是强制让浏览器在打印时认为页面宽度达到了lg或xl断点的阈值，这样React-Bootstrap的col-lg-6样式就会自动生效。

在你的全局CSS文件或者组件的style标签里添加这段代码：

@media print {
  /* 模拟lg断点（992px），想要xl断点就改成1200px */
  body {
    width: 992px;
    margin: 0 auto; /* 让页面居中，可选 */
  }

  /* 避免打印时内容被截断，解除overflow限制 */
  html, body {
    overflow: visible;
  }
}

这样打印预览时，浏览器会按照992px的宽度渲染页面，自然触发lg断点的布局，两个表格就会并排显示了。

方案二：直接自定义打印时的列样式 #

如果方案一的宽度模拟没达到预期，或者你想更精准控制，可以给表格容器加自定义类，然后在打印样式里强制设置并排布局。

首先给你的Col组件加上自定义类名：

<Row>
  <Col lg={6} md={12} className="print-side-by-side">
    <Table striped bordered hover>
      {/* 表格内容 */}
    </Table>
  </Col>
  <Col lg={6} md={12} className="print-side-by-side">
    <Table striped bordered hover>
      {/* 表格内容 */}
    </Table>
  </Col>
</Row>

然后添加打印专属样式：

@media print {
  .print-side-by-side {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* 可选：调整表格字体和内边距，避免打印时内容拥挤 */
  .print-side-by-side .table {
    font-size: 0.8rem;
    padding: 0.3rem;
  }
}

这里用!important是为了确保打印样式能覆盖React-Bootstrap默认的col-md-12样式，保证优先级足够高。

方案三：调整打印页面方向（横向打印） #

如果你的表格内容比较宽，横向打印能提供更充足的宽度空间，更容易触发lg/xl断点。可以用@page规则设置：

@media print {
  @page {
    size: landscape; /* 设置为横向打印 */
    margin: 1cm; /* 调整页面边距，可选 */
  }

  /* 配合宽度模拟效果更好 */
  body {
    width: 1100px;
  }
}

注意：不同浏览器对@page的支持略有差异，Chrome和Firefox表现都不错，建议多测试几个浏览器确保效果。

最后提醒下，修改完样式后一定要打开打印预览测试，不同浏览器的打印渲染逻辑可能有细微差别，确保在你目标用户常用的浏览器里能正常显示。

内容的提问来源于stack exchange，提问作者Canovice