Bootstrap列中的自动分页

Question

我正在为Web应用程序打印样式表。 该应用程序使用引导程序。 每页都应该是可打印的，并且应该删除尽可能多的空格。

我的问题涉及以下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表那样按行构造的。

Answer 1

您是对的：因为它的结构是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 ，根据页面的其余部分，可能不需要.container 。）

检查@media print样式有点不方便，但是您可以通过在Codepen中进行演示，选择“调试”视图，然后查看打印预览或另存为pdf来进行此操作。 这是上述代码段的Codepen调试视图的链接