打印 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;
    }

    ...
    ...
}