[bootstrap]bootstrap 讓 page-break-after無作用,無法順利分頁

參考網址:stackoverflow

網路討論

Firstly, page-break doesn't work inside absolutely positioned elements so make sure your page-break isn't inside one.

Now, since float is causing the page-break to be ignored, we need to clear the float.

The problem is that clear: both; doesn't work if the element with page-break-after: always; is a float (eg: .col-xs-12 in bootstrap).

The trick is to add 2 new divs with the clear and page-break after the div you want to add the page-break to:

<div class="page-break-clear"></div>
<div class="page-break">&nbsp;</div>

<style type="text/css">
.page-break-clear { 
  clear: both;
}
.page-break {
  page-break-after: always; /* depreciating, use break-after */
  break-after: page;
  height: 0px;
  display: block!important;
}
</style>

試過了,還是沒作用。

本篇發表於 程式設計。將永久鏈結加入書籤。