Bootstrap列中的自动分页符

时间:2016-09-05 10:58:23

标签: css twitter-bootstrap-3 multiple-columns page-break page-break-inside

我正在处理Web应用程序的打印样式表。该应用程序使用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表一样逐行构建。

1 个答案:

答案 0 :(得分:4)

你是对的:因为这是结构化为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样式有点不方便,但您可以通过在codepen中进行演示,选择“调试”视图,然后查看打印预览或另存为pdf来完成此操作。 。这是the codepen debug view of the above snippet

的链接