Bootstrap 3 - Печать макета и перерывы после каждого столбца сетки

Question

Если взять этот пример (посмотреть его здесь: http://www.bootply.com/93816)

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6">Column1</div> 
    <div class="col-md-6">Column2</div> 
    </div> 
</div> 

Когда вы делаете предварительный просмотр печати сгенерированной страницы, это, кажется, вызывает столбцы для стека/разрыва (как если бы поплавок был удален) вместо отображения их в обычном макете сетки.

Я просмотрел разделы bootstrap.css и не вижу ничего, что связано с div, что могло бы случиться так.

Кто-нибудь знает, как этого избежать?

Answer 1

Комментарий Bojangles дал мне правильное направление, поэтому я отвечу на свой вопрос.

Использование столбцов сетки размера «xs», которое согласно http://getbootstrap.com/css/#grid-options предназначено для «Extra small devices Телефоны (< 768px)», Bootstrap счастливо печатает, как ожидалось.

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6">Column1</div> 
    <div class="col-xs-6">Column2</div> 
    </div> 
</div> 

Answer 2

Я создал отдельный print.css и добавил следующее:

@page { 
    size: A3; 
    margin-left: -5cm; 
    margin-right: -5cm; 
    } 

отлично работает с Chrome, но отрицательные поля убивает IE. Firefox, похоже, не нуждается в этом. Меня интересовал бы другой подход.

Answer 3

Решение должно быть на элементах, а не на самой странице. Вы также не должны полагаться на col-xs -..., поскольку они предназначены для небольших экранов/устройств.

Проблема в том, что сама страница невелика с точки зрения пикселей, поэтому bootstrap считает, что ей необходимо применить стили xs.

вопрос не будет решаться командой Bootstrap и связана с https://code.google.com/p/chromium/issues/detail?id=273306

раствора бутстрапом было туманно документ это «изворотливый» поведения https://github.com/twbs/bootstrap/issues/12078.

На мой взгляд, должен существовать набор раскладок col-print -..., поэтому дополнительные малые и печатные могут сосуществовать.

Мое временное решение заключается в следующем:

@media print { 
    [class*="col-sm-"] { 
    float: left; 
    } 
} 

Вы можете использовать Col-печать, в нашем случае мы используем см, не хз, потому что мы хотим, чтобы хз блокировать расположение, поэтому использование тех классы для печати не будут работать.

Answer 4

На основании решения Gerard, вы можете использовать загрузочный подмешать .make-сетка(), как это, поэтому печать не всегда падают на размер хз

@media print { 
    .make-grid(sm); 
} 

или сгенерированного CSS (если вам не нравится, используя меньше):

@media print { 
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
    float: left; 
    } 
    .col-sm-12 { 
    width: 100%; 
    } 
    .col-sm-11 { 
    width: 91.66666667%; 
    } 
    .col-sm-10 { 
    width: 83.33333333%; 
    } 
    .col-sm-9 { 
    width: 75%; 
    } 
    .col-sm-8 { 
    width: 66.66666667%; 
    } 
    .col-sm-7 { 
    width: 58.33333333%; 
    } 
    .col-sm-6 { 
    width: 50%; 
    } 
    .col-sm-5 { 
    width: 41.66666667%; 
    } 
    .col-sm-4 { 
    width: 33.33333333%; 
    } 
    .col-sm-3 { 
    width: 25%; 
    } 
    .col-sm-2 { 
    width: 16.66666667%; 
    } 
    .col-sm-1 { 
    width: 8.33333333%; 
    } 
    .col-sm-pull-12 { 
    right: 100%; 
    } 
    .col-sm-pull-11 { 
    right: 91.66666667%; 
    } 
    .col-sm-pull-10 { 
    right: 83.33333333%; 
    } 
    .col-sm-pull-9 { 
    right: 75%; 
    } 
    .col-sm-pull-8 { 
    right: 66.66666667%; 
    } 
    .col-sm-pull-7 { 
    right: 58.33333333%; 
    } 
    .col-sm-pull-6 { 
    right: 50%; 
    } 
    .col-sm-pull-5 { 
    right: 41.66666667%; 
    } 
    .col-sm-pull-4 { 
    right: 33.33333333%; 
    } 
    .col-sm-pull-3 { 
    right: 25%; 
    } 
    .col-sm-pull-2 { 
    right: 16.66666667%; 
    } 
    .col-sm-pull-1 { 
    right: 8.33333333%; 
    } 
    .col-sm-pull-0 { 
    right: auto; 
    } 
    .col-sm-push-12 { 
    left: 100%; 
    } 
    .col-sm-push-11 { 
    left: 91.66666667%; 
    } 
    .col-sm-push-10 { 
    left: 83.33333333%; 
    } 
    .col-sm-push-9 { 
    left: 75%; 
    } 
    .col-sm-push-8 { 
    left: 66.66666667%; 
    } 
    .col-sm-push-7 { 
    left: 58.33333333%; 
    } 
    .col-sm-push-6 { 
    left: 50%; 
    } 
    .col-sm-push-5 { 
    left: 41.66666667%; 
    } 
    .col-sm-push-4 { 
    left: 33.33333333%; 
    } 
    .col-sm-push-3 { 
    left: 25%; 
    } 
    .col-sm-push-2 { 
    left: 16.66666667%; 
    } 
    .col-sm-push-1 { 
    left: 8.33333333%; 
    } 
    .col-sm-push-0 { 
    left: auto; 
    } 
    .col-sm-offset-12 { 
    margin-left: 100%; 
    } 
    .col-sm-offset-11 { 
    margin-left: 91.66666667%; 
    } 
    .col-sm-offset-10 { 
    margin-left: 83.33333333%; 
    } 
    .col-sm-offset-9 { 
    margin-left: 75%; 
    } 
    .col-sm-offset-8 { 
    margin-left: 66.66666667%; 
    } 
    .col-sm-offset-7 { 
    margin-left: 58.33333333%; 
    } 
    .col-sm-offset-6 { 
    margin-left: 50%; 
    } 
    .col-sm-offset-5 { 
    margin-left: 41.66666667%; 
    } 
    .col-sm-offset-4 { 
    margin-left: 33.33333333%; 
    } 
    .col-sm-offset-3 { 
    margin-left: 25%; 
    } 
    .col-sm-offset-2 { 
    margin-left: 16.66666667%; 
    } 
    .col-sm-offset-1 { 
    margin-left: 8.33333333%; 
    } 
    .col-sm-offset-0 { 
    margin-left: 0%; 
    } 
}