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

问题描述

我已经在 stackoverflow 上浏览了很多答案，这些答案半涵盖了我的疑惑，但没有找到任何对我有用的东西.

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

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

我知道我可以专门为打印更改 css.但是bootstrap 3网格系统怎么解决这个问题呢?我的 div 上的宽度基于我为 col-xs 添加的内容，但我希望打印使用 col-md 的布局(宽度)

在我为此苦苦挣扎了几个小时后，我意识到它可能比我最初预期的要复杂.只是改变宽度并不能解决我的问题.我的许多 div 都有

的语法

或

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

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

提前致谢

解决方案

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

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.

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.

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?

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

Edit: 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>

or

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

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?

Thanks in advance

解决方案

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屋！