带引导的打印页面3

发布时间：2020-12-18 00:10:21 所属栏目：安全来源：网络整理

导读：我在stackoverflow上看到了很多答案，它覆盖了我所想知道的一切，但没有发现任何对我有用的东西。我明白A4的打印页面大约为550像素，因此引导程序将使用通常用于移动设备的样式和布局。当我对我的网页使用Ctrl P时，可打印的页面看起来就像我的页面的移动

我在stackoverflow上看到了很多答案，它覆盖了我所想知道的一切，但没有发现任何对我有用的东西。

我明白A4的打印页面大约为550像素，因此引导程序将使用通常用于移动设备的样式和布局。

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

我知道我可以更改css专门为打印。但是如何用引导3网格系统来解决这个问题？我的div上的宽度取决于我为col-xs添加的内容，但是我希望print使用layout(width)作为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-(asterisk)进行了这种布局，您可以将打印介质查询之间的所有-sm-更改为-xs。所有百分比在每个断点都是相同的，所以将sm更改为xs将打印并忽略其他col-(asterisk)类。啊，我现在读了这个帖子，你需要把所有的col-sm都改成col，然后再使用！ 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%;
 }

  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!