Автоматический разрывы страниц в столбцах 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

Вы правы: поскольку это структурировано как столбцы css, а не как <table>, вы не сможете сделать это, не используя скрипт для значительного изменения DOM.

Но решение не слишком сложно. Давайте подумаем о том, чего вы хотите: сетка, в которой @media screen имеет три строки и на @media print помещает каждую строку на свою страницу. Если каждая строка была сгруппирована в один элемент, вы можете использовать свойства CSS page-break-after и/или page-break-before, чтобы поместить каждую строку на свою страницу. В разметке каждая строка

.row .col-x .line

, который и получает в пути вашего форматирования печати и не семантический. Давайте сделаем каждую строку a .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, выбрав «debug» view, а затем просмотрев предварительный просмотр или сохранение в формате pdf. Вот ссылка на the codepen debug view of the above snippet