打印将基于Bootstrap的布局更改为单列模式

问题描述

打印基于Boostrap网格布局的页面时，它会折叠为单列模式。有人知道这是为什么吗？以及如何解决这个问题？

When a page based on Boostrap's grid layout is printed, it collapses to single column mode. Does anybody know why is that and how to get around this issue?

通过在。

The problem is best seen by pressing Ctrl+P at http://getbootstrap.com/css/#grid.

推荐答案

如果您使用Chrome进行打印，请按照进行打印Chrome似乎将打印介质的宽度设置为小于768像素，将列移动到 xs /超小区域。 将 col-xs-6 对于一个名为 print-col-xs-6 的类来说就像使用jquery一样：

However, the col-xs-* columns seem inconsistent when rendering to media screen vs print. Personally, I wanted to columnize something in print CSS media mode and not in screen CSS media mode, so I hooked into Chrome's pre-print callback to inject col-xs-6 for a class called print-col-xs-6 like this using jquery:

var beforePrint = function() {
    console.log('Functionality to run before printing.');
    $('.print-col-xs-6').addClass('col-xs-6')
};
var afterPrint = function() {
    console.log('Functionality to run after printing');
    set_timeout(function() {
      $('.print-col-xs-6').removeClass('col-xs-6')
    },500)
};

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

我不确定超时是否必要，因为我的应用程序适用于某些在房子里，他们被迫使用chrome :-D

I'm not sure the timeout is necessary and since my app is for some in house folks, they are forced to use chrome :-D

这篇关于打印将基于Bootstrap的布局更改为单列模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！