在 Bootstrap 列中自动分页

Question

我正在为 Web 应用程序制作打印样式表。该应用程序使用 bootstrap。每个页面都应该是 printable 并且尽可能多地删除空格。

我的问题涉及以下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.

的行之间有一个分页符

我认为我面临的主要问题是我有 table 是逐列构建的，而不是像普通 HTML table.[=12 那样逐行构建的=]

Answer 1

你是对的：因为它的结构是 css 列而不是 <table>，如果不使用脚本大量修改 DOM.

但解决方案并不太棘手。让我们考虑一下您想要什么：@media screen 具有三行并且在 @media print 上将每一行放在其自己的页面上的网格。如果每一行都分组在一个元素中，您可以使用 page-break-after and/or 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, selecting the "debug" view, and then looking at the print preview or saving as a pdf. Here's a link to the codepen debug view of the above snippet

中做个demo

在 Bootstrap 列中自动分页

Auto page-break in Bootstrap columns

css

twitter-bootstrap-3

multiple-columns

page-break

page-break-inside