为什么Bootstrap的col列在打印视图中会自动换行？

问题原因 #

• Bootstrap 4 的col-sm-*类属于响应式栅格类，仅在屏幕视口宽度≥576px时才会应用多列并排的宽度规则，小于该宽度时所有列默认占满整行。
• 绝大多数浏览器的打印预览会将打印介质的默认视口判定为小于576px的超小屏（xs断点），同时Bootstrap 4 内置的打印媒体查询规则会重置栅格列的浮动、宽度等布局属性，进一步强制所有列换行占满整行。

解决方案 #

方案1：使用无断点栅格类 #

直接将代码里的col-sm-6替换为col-6、col-sm-4替换为col-4，无断点栅格类不受视口宽度限制，屏幕显示和打印场景下都会保持设定的宽度比例：

<div class="row">
  <div class="col-6" style="background-color:yellow;">50%</div>
  <div class="col-6" style="background-color:orange;">50%</div>
</div>

<div class="row">
  <div class="col-4" style="background-color:yellow;">33.33%</div>
  <div class="col-4" style="background-color:orange;">33.33%</div>
  <div class="col-4" style="background-color:yellow;">33.33%</div>
</div>

方案2：自定义打印场景专属栅格样式 #

如果需要保留屏幕端的响应式效果（小屏自动换行），仅针对打印场景固定多列布局，可以在页面样式中添加自定义打印媒体查询规则：

@media print {
  .col-print-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-print-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

之后给对应列添加对应的打印类即可：

<div class="row">
  <div class="col-sm-6 col-print-6" style="background-color:yellow;">50%</div>
  <div class="col-sm-6 col-print-6" style="background-color:orange;">50%</div>
</div>

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