Bootstrap 3 - Печать/PDF

Question

мне нужно напечатать мое резюме, но старый трюк

<link href="css/bootstrap.min.css" rel="stylesheet" media="print"> 

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

Правильно:
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
Неправильно:
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

Как я могу это исправить? Я не могу повторно изобретать bootstrap 3, конечно, и я не могу использовать bootstrap 2, поскольку синтаксис изменен.

Я сделал хороший шаблон для Curriculum Vitae, и я хотел бы сохранить его также в формате pdf/печати.

Благодаря

Answer 1

Я самый случай, я буду ожидать, что печать в не горизонтальной версии, может быть? В вашем случае вы можете попытаться применить правила сетки в запросе на печать.

В случае использования небольшой сетки (col-sm- *) по умолчанию, b.e.

<div class="container"> 

    <div class="row"> 
     <div class="col-sm-6">Left</div> 
     <div class="col-sm-6">Right</div> 
    </div> 
    </div> <!-- /container --> 

В вашем grid.less заменить @media (min-width: @screen-tablet) { с @media (min-width: @screen-tablet), print { (добавить печать, см: CSS media queries: max-width OR max-height) Recompile самозагрузки и ваш PDF будет влево/вправо так же, как экран в настоящее время.

Без Less вы могли бы попытаться добавить конкретные правила CSS для вашего случая, как:

@media print 
{ 
    body {width:1200px;} 
    div[class|=col-]{float:left;} 
    .col-sm-6{width:50%} 
} 

Примечание print.less содержит специальные правила для печати. Это используется, чтобы скрыть навигационную панель на примере. Также классы утилиты: http://getbootstrap.com/css/#responsive-utilities имеют классы печати.

Если ваш браузер принять @viewport (см: http://docs.webplatform.org/wiki/css/atrules/@viewport) можно будет возможно сделать: @media печати {@viewport {ширина: 1200px;}} до начальной загрузки CSS нагрузок

Answer 2

В моем проекте Я поставил ту же проблему. Так как у меня есть app.less файл, в котором я импортировать bootstrap.less источник, я сделал следующее:

@import "my_path/bootstrap.less"; 
@media print{ 
    .make-grid(sm); 
} 

Что на самом деле то, что это делается в файле Bootstrap в grid.less

Может быть, это не чистое решение, но это 3-х строчные коды;)

Answer 3

Добавление запроса на печать для меня работало. Это то, что я наконец наткнулся.

@media print { 
    @page { 
    size: 330mm 427mm; 
    margin: 14mm; 
    } 
    .container { 
    width: 1170px; 
    } 
}