Boostrap 열의 자동 페이지 나누기

Question

웹 응용 프로그램의 인쇄 스타일 시트를 만들고 있습니다. 응용 프로그램은 부트 스트랩을 사용합니다. 모든 페이지는 인쇄 가능해야하며 가능한 많은 공백을 제거해야합니다.

내 문제는 다음과 같은 HTML 코드가 포함됩니다

<div class="row"> 
    <div class="col-xs-6"> 
    <div class="line">...</div> 
    <div class="line">...</div> 
    <div class="line">...</div> 
    </div> 
    <div class="col-xs-6"> 
    <div class="line">...</div> 
    <div class="line">...</div> 
    <div class="line">...</div> 
    </div> 
</div> 

가 나는 두 개의 열 레이아웃이를 각 열은 여러 라인을 갖추고 있습니다. 열의 줄 사이에서 페이지 나누기를 사용하는 방법이 있습니까?

열에는 많은 행이있을 수 있으므로 전체 div가 새 페이지로 이동하지 않도록하고 싶습니다. 대신 div의 줄 사이에 페이지 나누기를 원합니다.

내가 직면 한 주된 문제는 필자가 직면 한 열과 행이 아닌 일반 HTML 테이블로 구성된 테이블이 있다는 것입니다.

Answer 1

맞습니다. 이것은 <table> 대신 CSS 열로 구성되어 있기 때문에 스크립트를 사용하여 DOM을 많이 수정하지 않으면이 작업을 수행 할 수 없습니다.

그러나 해결책은 너무 까다 롭지 않습니다. 당신이 원하는 것을 생각해 봅시다. @media screen에는 3 개의 행이 있고 @media print에는 각 행이 고유 한 페이지에 있습니다. 각 행이 단일 요소로 그룹화 된 경우 page-break-after 및/또는 page-break-before CSS 속성을 사용하여 각 행을 자체 페이지에 배치 할 수 있습니다. 마크 업의 각 행은 모두 인쇄 서식의 방법으로 얻고, 의미없는

.row .col-x .line

입니다. 각 행을 .row으로 만드십시오!

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 
@media print { 
 
    .rows-print-as-pages .row { 
 
    page-break-before: always; 
 
    } 
 
    /* include this style if you want the first row to be on the same page as whatever precedes it */ 
 
    /* 
 
    .rows-print-as-pages .row:first-child { 
 
    page-break-before: avoid; 
 
    } 
 
    */ 
 
}

<div class="container rows-print-as-pages"> 
 
    <div class="row"> 
 
    <div class="col-xs-6">first row left</div> 
 
    <div class="col-xs-6">first row right</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-6">second row left</div> 
 
    <div class="col-xs-6">second row right</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-6">third row left</div> 
 
    <div class="col-xs-6">third row right</div> 
 
    </div> 
 
</div>

(여기에 휴식이 .container없이 올바른 장소에 가지 마세요. 당신이 페이지의 나머지 부분에 따라 .container이 필요하지 않을 수 있습니다.)

검사 @media print 스타일은 약간 불편하지만, codepen에서 데모를 만들고 "디버그"보기를 선택한 다음 인쇄 미리보기를 보거나 pdf로 저장하면됩니다. the codepen debug view of the above snippet

에 대한 링크가 있습니다.