使用 bootstrap 3 打印页面

Question

我一直在 stackoverflow 上查找很多答案，这些答案半涵盖了我想知道的内容，但没有找到任何对我有用的内容。

据我所知，A4 的打印页面约为 550 px，因此 bootstrap 将使用通常用于移动设备的样式和布局。

当我对网页使用 Ctrl+P 时，可打印页面看起来就像页面的移动版本。但如何让它看起来像桌面版本呢？ (媒体> 1024 px)有办法做到这一点吗？

我知道我可以更改专门用于打印的 CSS。但是如何用 Bootstrap 3 网格系统解决这个问题呢？我的 div 上的宽度基于我为 col-xs 添加的内容，但我希望 print 使用 col-md 的布局(宽度)

编辑:在我为此苦苦挣扎了几个小时之后，我意识到它可能比我最初预期的更复杂。仅改变宽度并不能解决我的问题。我的许多 div 的语法都是

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

或

<div class="col-md-4 col-sm-6 col-xs-12"></div>

对于小型设备，页面在 XS 中看起来不错，但在 XS 中打印会使许多元素看起来很大。所以问题仍然存在。有没有办法让打印页面看起来与中型或大型设备的布局相同？或者我是否必须在不使用引导网格系统的情况下制作打印 css，并为所有元素添加 pt 中的静态宽度才能实现此目的？

提前致谢

Answer 1

提供 JSBin 会很有帮助。无论如何，由于我在 JSBin 中使用 col-sm-(星号)进行了此布局，因此您只需将打印媒体查询之间的所有 -sm- 更改为 -xs- 即可。每个断点处的所有百分比都是相同的，因此将 sm 更改为 xs 将打印该百分比并忽略其他 col-(星号)类。啊，我现在读了这篇文章，你需要将其中的所有 col-sm 更改为 col-md，然后使用 !important，这样就可以了。 xs col 位于媒体查询之外，因此这就是发生这种情况的原因。

http://jsbin.com/AzICaQes/5

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

  }