分页符在 Bootstrap 模式中不起作用

Question

我正在使用 Bootstrap (v4) 模态，在模态中有多个部分。 我想打印模态正文的内容并在新页面上开始每个部分。 当然，我会使用以下 CSS：

section {
    page-break-after: always; 
}

我已经尝试了很多东西，但我似乎无法让分页符在模态中工作。 我在 codepen 中做了一个例子来展示我试图实现的目标。 真的很感激一些帮助。 提前致谢！

HTML：

<div class="modal-body do-print">
  <section>
    <h1>Page 1</h1>
    <p>
      content
    </p>
  </section>
  <section>
    <h1>Page 2</h1>
    <p>
      content
    </p>
  </section>
</div>

CSS：

section {
    page-break-after: always !important;
    margin: 40px;
}

https://codepen.io/pen/deqivq

Answer 1

根据“page-break-after”规则，它不适用于绝对定位的元素。 请检查以下代码 -

 #printSection { position:absolute; // Remove this and it will work left:0; top:0; }

谢谢，