引导程序-打印页面而不会破卡

Question

我正在尝试使用window.print（）打印一个简单的引导页面。此页面看起来像这样（div.col-md-12和卡片的倍数）：

<div class="overview"> <!-- Take all screen width -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Test</div>
                <div class="card-body">
                    <!-- Insert some long Lorel Ipsum text here -->
                </div>
            </div>
        </div>
    </div>
</div>

我要打印此页而不会破坏那些div.card。经过一番研究，我尝试了在StackOverflow上找到的多重解决方案，但没有成功。

<div class="card" style="page-break-inside:avoid;page-break-before:always;">

这不起作用（即使放在外部CSS介质打印物中）。在div.col-md-12上使用这些CSS属性也不起作用。

有什么想法吗？

Answer 1

我找到了解决方法。

为确保page-break-X正常运行，应确保元素（和父元素）显示为块。在.row，.col-md-12，.container（此处为.overview）中添加display：block可以使CSS属性起作用。