printing - 使用 bootstrap 3打印页面

我一直在这里查看关于stackoverflow的很多答案，这些答案半发现了我想知道的事情，但是还没有找到对我有用的东西。

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

当我在网页上使用Ctrl + P时，可打印页面看起来就像页面的移动版本一样。但是如何使它看起来像台式机版本？ (媒体> 1024像素)有没有办法做到这一点？

我知道我可以专门为打印更改CSS。但是如何用bootstrap 3网格系统解决这个问题呢？ div上的宽度基于我为col-xs添加的内容，但是我希望打印为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中添加静态宽度才能实现此目的？

提前致谢

最佳答案

提供一个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%;
 }

  }

关于printing - 使用 bootstrap 3打印页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20243767/