引导网格进行打印 | 引导网格进行打印

本文介绍了引导网格进行打印的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想设计一个具有不同布局的报告页面，以便打印到移动设备上.我正在使用bootstrap v3.似乎网格无法在两者之间进行区分，因为打印的断点与移动(xs)的断点相同

I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can't differentiate between the two as the breakpoint for printing is the same as the breakpoint for mobile (xs)

例如:在下面的测试html中，我的打印页面(或打印预览)并排显示xs6列，但sm6列堆叠在一起. xs和sm之间没有断点.

For example: In the below test html my printed page (or print preview) shows the xs6 columns side by side but the sm6 columns stacked. There isn't a breakpoint between xs and sm.

我的打印页面肯定比移动视口宽，所以它不应该使用sm布局吗?

Surely my printed page is wider than my mobile viewport so shouldn't it use the sm layout?

我做错什么了吗?还是这样吗?是否有用于打印的定义的视口宽度?

Am I doing something wrong or is this the way it is? Is there a defined viewport width for printing?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
            xs6
            </div>
            <div class="col-xs-6">
            xs6
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
            sm6
            </div>
            <div class="col-sm-6">
            sm6
            </div>
        </div>
    </div>
</body>
</html>

推荐答案

我所做的是在打印CSS中手动重新创建这些列类.

What I did was to manually recreate those columns classes in my print css.

.col-print-1 {width:8%;  float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}

然后，我只使用那些类，就像我使用引导程序类一样，使我的列仅用于打印.我还创建了.visible-print和.hidden-print来仅在打印版本中隐藏/显示元素.

Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-print and .hidden-print to hide/show elements only in the print version.

它仍然需要一些工作，但是快速的补丁对我有很大帮助.

It still needs some work, but that quick patch helped me a lot.

这篇关于引导网格进行打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！