我正在为网络应用程序制作打印样式表。该应用程序使用 Bootstrap 。每个页面都应该是可打印的,并且应该尽可能多地删除空白。
我的问题涉及以下 HTML 代码:
<div class="row">
<div class="col-xs-6">
<div class="line">...</div>
<div class="line">...</div>
<div class="line">...</div>
</div>
<div class="col-xs-6">
<div class="line">...</div>
<div class="line">...</div>
<div class="line">...</div>
</div>
</div>
我有一个两列布局,每列都有几行。有没有办法在列中的行之间启用分页符?
列可以有很多行,我想避免将整个 div 转移到新页面。相反,我想在 div 的行之间有一个分页符。
我认为我面临的主要问题是我的表格是逐列构建的,而不是像普通 HTML 表格那样逐行构建的。
最佳答案
你是对的:因为它的结构是 css 列而不是 <table>
,如果不使用脚本大量修改 DOM,您将无法执行此操作。
但解决方案并不太棘手。让我们想想你想要什么:一个 @media screen
的网格有三行并且在 @media print
上将每一行放在自己的页面上。如果每一行都分组在一个元素中,您可以使用 page-break-after
和/或 page-break-before
将每一行放在其自己的页面上的 CSS 属性。在您的标记中,每一行都是
.row .col-x .line
这既妨碍了您的打印格式,又不是语义的。让我们将每一行设为 .row
!
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
@media print {
.rows-print-as-pages .row {
page-break-before: always;
}
/* include this style if you want the first row to be on the same page as whatever precedes it */
/*
.rows-print-as-pages .row:first-child {
page-break-before: avoid;
}
*/
}
<div class="container rows-print-as-pages">
<div class="row">
<div class="col-xs-6">first row left</div>
<div class="col-xs-6">first row right</div>
</div>
<div class="row">
<div class="col-xs-6">second row left</div>
<div class="col-xs-6">second row right</div>
</div>
<div class="row">
<div class="col-xs-6">third row left</div>
<div class="col-xs-6">third row right</div>
</div>
</div>
(如果没有 .container
,这里的中断不会出现在正确的位置。根据页面的其余部分,可能不需要 .container
。)
正在检查 @media print
styles 有点不方便,但是你可以在codepen 中做一个demo。 ,选择“调试” View ,然后查看打印预览或另存为 pdf。这是 the codepen debug view of the above snippet 的链接
关于css - Bootstrap 列中的自动分页符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39329140/