将打印媒体的引导网格从 col-xs 更改为 col-sm

Posted 2023-03-06

【中文标题】将打印媒体的引导网格从 col-xs 更改为 col-sm

【英文标题】：Changing bootstrap grid for print media from col-xs to col-sm

【发布时间】：2015-12-27 09:30:03

【问题描述】：

我有一个网页在打印时需要遵循col-sm-* 网格而不是col-xs-* 网格。有没有一种简单的方法可以实现这一目标？可以更改打印预览页面的宽度，使其适合col-sm-* 规则的所有样式吗？

这是一个例子：

window.print();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6 col-xs-12">
    <h1>Left column</h1>
  </div>

  <div class="col-sm-6 col-xs-12">
    <h1>Right column</h1>
  </div>
</div>

这是实际打印的内容：

这是我希望它打印的内容：

【问题讨论】：

我想它会在调用时确定窗口大小。

它没有。即使从大屏幕打印，col-xs-* 样式也会被遵循。

@JohnBupit 您是否尝试过我在回答中提供的解决方案？

【参考方案1】：

您需要使用自定义 CSS 进行打印，该 CSS 将覆盖打印布局中的 sm。此问题已在引导程序version > 3.0 中观察到。

@media print 

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 
  float: left!important;

.col-sm-12 
  width: 100%;

.col-sm-11 
  width: 91.66666666666666%;

.col-sm-10 
  width: 83.33333333333334%;

.col-sm-9 
  width: 75%;

.col-sm-8 
  width: 66.66666666666666%;

.col-sm-7 
  width: 58.333333333333336%;

.col-sm-6 
  width: 50%;

.col-sm-5 
  width: 41.66666666666667%;

.col-sm-4 
  width: 33.33333333333333%;

.col-sm-3 
  width: 25%;

.col-sm-2 
  width: 16.666666666666664%;

.col-sm-1 
  width: 8.333333333333332%;

Here's the running snippet 以上示例与您的代码。 点击全屏预览，然后打印。

【讨论】：

谢谢 :)