jquery - 打印 Bootstrap 网页被中断

Question

我有一个用 Bootstrap 制作的动态页面，我需要能够打印这个动态页面。

我正在使用媒体查询来设计页面样式:

/** Custom Print Styles **/
@media print {
    header,
    .menu,
    footer {
        display: none;
    }

    ...
    ...
    ...
}

我测试了打印，不知何故我遇到了问题，如果我有多个页面，如果最后一页只包含几行则不会打印。当我向第一页添加一些随机文本以向整个文档添加一些行时，问题就消失了，这意味着最后一页将有更多行要打印。

这是我的打印脚本:

$("body").on("click", ".btn-print", function() {
    window.print();
});

我也试过使用 Ctrl + P 打印文档，但还是有同样的问题。

Answer 1

我通过这样做解决了这个问题:

@media print {
    body, h1, h2, h3, ol, ul, div, span, p {
        display: block !important;
        width: auto !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }

    ...
    ...
}