为何Bootstrap列在打印时堆叠而非并排？

问题描述 #

我用Bootstrap的container、row、col-md-9和col-md-3构建了Razor页面中最终批准信的头部布局，代码正常运行已超8年。网页显示布局正常，但点击调用window.print()的打印按钮后，Chrome打印预览及实际打印时列出现堆叠：原本应在右侧的发件人Logo和地址被挤到收件人地址下方，而收件人地址仍处于信封窗口对应位置。测试时为列添加了红、绿边框，相关代码如下：

<div class="container">
    <div class="row" style="border: solid 4px blue;">
        <div class="col-md-9" style="border:solid 2px red;">
            <br /><br />
            <br /><br />
            <p>
                @DateTime.Today.ToString("MMMM dd, yyyy")<br />
                <br /><br /><br />
                @Model.Courses.CurrentContactName<br />
                @Model.Courses.ContactBizName<br />
                @Model.Courses.ContactAddress<br />
                @Model.Courses.ContactCity,  @Model.Courses.ContactState @Model.Courses.ContactZip<br />
            </p>
        </div>

        <div class="col-md-3" style="border:solid 2px green;">
            <img src="~/images/oesac_white_2.25.jpg" />
            <br />
            <p style="font-size: 1.3rem;">
                OESAC CEU Committee<br />
                P. O. Box 577 <br />
                Canby, OR 97013-0577 <br />
                Phone: 503/698-6486 <br />
                Email: info@oesac.org <br />
                http://www.oesac.org
            </p>
        </div>
    </div> <!--ROW-->

问题原因 #

Bootstrap的col-md-*类基于屏幕宽度断点（md对应≥768px），Chrome打印预览默认的纸张尺寸（如A4）对应的打印视图宽度可能低于该断点，导致列从并排切换为堆叠布局。

解决办法 #

方法1：添加打印专用CSS规则 #

在页面的<style>标签中添加打印媒体查询，强制打印时保持列并排：

@media print {
  .row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  /* 可选：移除打印时的测试边框 */
  .row, .col-md-9, .col-md-3 {
    border: none !important;
  }
}

方法2：改用无断点的列类 #

将col-md-9和col-md-3替换为无断点的col-9和col-3，这类类在所有宽度下（包括打印视图）都会保持并排：

<div class="container">
    <div class="row" style="border: solid 4px blue;">
        <div class="col-9" style="border:solid 2px red;">
            <br /><br />
            <br /><br />
            <p>
                @DateTime.Today.ToString("MMMM dd, yyyy")<br />
                <br /><br /><br />
                @Model.Courses.CurrentContactName<br />
                @Model.Courses.ContactBizName<br />
                @Model.Courses.ContactAddress<br />
                @Model.Courses.ContactCity,  @Model.Courses.ContactState @Model.Courses.ContactZip<br />
            </p>
        </div>

        <div class="col-3" style="border:solid 2px green;">
            <img src="~/images/oesac_white_2.25.jpg" />
            <br />
            <p style="font-size: 1.3rem;">
                OESAC CEU Committee<br />
                P. O. Box 577 <br />
                Canby, OR 97013-0577 <br />
                Phone: 503/698-6486 <br />
                Email: info@oesac.org <br />
                http://www.oesac.org
            </p>
        </div>
    </div> <!--ROW-->
</div>

方法3：调整打印页面边距 #

在Chrome打印预览中，手动将页面边距设置为「无」或「最小」，避免因边距过大压缩页面宽度触发断点。

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