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

Question

我有一个网页，在打印时需要遵循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>

这是实际打印的内容：

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

Answer 1

您需要使用自定义CSS进行打印，该CSS会覆盖smin版式。在bootstrap中已经观察到此问题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%;
}

}

这是上面的示例与您的代码的运行摘要。单击全屏预览，然后将其打印。