如何使 bootstrap3 类与打印兼容答案

【问题标题】：How to make bootstrap3 classes compatible with printing如何使 bootstrap3 类与打印兼容
【发布时间】：2014-02-09 03:14:57
【问题描述】：

我在页面上有一组“col-md-6”div。它们分别占据页面宽度的一半，直到屏幕大小调整到低于某个大小时，它们才会垂直堆叠。

当我打印屏幕时，它们总是垂直堆叠，即使页面与 div 并排完全可读。

通过使用 col-sm-6 和 col-xs-6 的实验，我发现让 div 并排打印的唯一方法是使用 col-xs-6 但这意味着 div 不会堆叠在非常小的（电话）显示屏。所以看来bootstrap认为打印机的宽度/分辨率和手机一样。

我做错了吗？为什么 bootstrap 认为打印机的分辨率这么低？我可以做些什么来改变它吗？

【问题讨论】：

标签： css responsive-design twitter-bootstrap-3

【解决方案1】：

我在这里使用了克里斯蒂娜给出的类似问题的答案，

Printing page with bootstrap 3

即通过添加到 css 媒体打印以查看 col-sm 就像它是 col-xs 一样

@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;
}
.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%;
 }

  }

【讨论】：

【解决方案2】：

作为 CSS 的替代方案，如果您使用 Less，则可以这样做。

@media print { .make-grid(md); }

用您想要使用的任何屏幕分辨率替换“md”。我发现 md 在我的情况下是在屏幕上和纸上看起来最好的。

这将在编译 Less 代码时调用 bootstrap 的 .make-grid mixin。

【讨论】：

【解决方案3】：

为了解决这个问题，我创建了一个 print.css 并包含：

@page {
    size: A4;
  /* margin: 40px; */ 
    margin: 0mm;
}
html, body {
    width: 1024px;
}

然后在我的_Layout页面中包含：

<link rel="stylesheet" type="text/css" media="print" href="../../Content/Print.css" />

【讨论】：