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

【问题标题】：Page-break not working in Bootstrap modal分页符在 Bootstrap 模式下不起作用
【发布时间】：2018-10-25 06:42:09
【问题描述】：

我使用的是 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

【问题讨论】：

标签： css printing bootstrap-4 bootstrap-modal page-break

【解决方案1】：

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

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

谢谢，

【讨论】：