[英]Page-break not working in Bootstrap modal
I'm using a Bootstrap (v4) Modal with multiple sections in the modal.我正在使用 Bootstrap (v4) 模态,在模态中有多个部分。 I would like to print the content of the modal-body and start each section on a new page.
我想打印模态正文的内容并在新页面上开始每个部分。 Naturally I would use the following CSS:
当然,我会使用以下 CSS:
section {
page-break-after: always;
}
I've tried many things but I can't seem to get the page-break to work in the modal.我已经尝试了很多东西,但我似乎无法让分页符在模态中工作。 I've made a example in codepen to show what I try to achieve.
我在 codepen 中做了一个例子来展示我试图实现的目标。 Really would appreciate some help.
真的很感激一些帮助。 Thanks in advance!
提前致谢!
HTML: 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: CSS:
section {
page-break-after: always !important;
margin: 40px;
}
As per "page-break-after" rules, it will not work with absolute positioned elements.根据“page-break-after”规则,它不适用于绝对定位的元素。 Please check below code -
请检查以下代码 -
#printSection { position:absolute; // Remove this and it will work left:0; top:0; }
Thanks,谢谢,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.