使用引导程序3打印页面 [英] Printing page with bootstrap 3

问题描述

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

I've been looking through a lot of answers here on stackoverflow that semi-cover what I'm wondering about, but haven't found anything that worked for me.

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

I understand that the printing page is about 550 px for A4 and therefor bootstrap will use the styles and layout usually used for mobile devices.

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

When I use Ctrl+P for my web page, the printable page looks just like the mobile version of my page. But how do I make it look like the desktop version? (media > 1024 px) Is there a way to do this?

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

I know I can change the css specifically for print. But how to solve this thing with the bootstrap 3 grid system? The width on my divs gets based on what I have added for col-xs, but I want print to use the layout (width) for col-md

编辑：经过数小时的努力，我意识到它可能比我最初预期的要复杂。仅改变宽度并不能解决我的问题。我的许多div的语法为

After I have been struggeling with this for some more hours I realize that it might be more complex than I first expected. Just changing the width doesn't solve it for me. Many of my divs has the syntax of

<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中添加静态宽度才能实现此目的？

The page looks good in XS for small devices, but printing in XS makes many elements look gigantic. So the question remains. Is there a way to make the printing page look the same as the layout for medium or large devices? Or do I have to make the printing css without using bootstrap grid system and add static widths in pt for all elements to accomplish this?

预先感谢

推荐答案

我最终使用了自己的print.css文件解决了问题，但没有包含所有响应式引导程序。仅在显示和隐藏中包含一些必要的引导程序。

I ended up solving the problem using an own print.css file without all the responsive bootstrap stuff included. Only included some of the necessary bootstrap things with show and hide.

这篇关于使用引导程序3打印页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！