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

Question

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

section {
    page-break-after: always; 
}

我已经尝试了很多事情，但似乎无法使分页符在模式中起作用。我做了example in 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/deqyvq

Answer 1

根据“分页后”规则，它不适用于绝对定位的元素。请参见下面的代码-

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

谢谢，