ブートストラップ3 - 印刷/ PDF

Question

（小型のデバイスから開始し、その後、大きなためにメディアクエリを追加し、私は私の履歴書を印刷する必要がありますが、ブートストラップ3は、携帯-最初であるため、古いトリック

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

はもう機能していません画面）ので、私は私のブラウザを印刷するときは、モバイルCSSを維持しています。

正しい：
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
間違っ：
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

私はこれをどのように修正することができますか？ もちろん、ブートストラップ3を再発明することはできません。構文が変更されたため、ブートストラップ2を使用することはできません。

私はCurriculum Vitaeの素晴らしいテンプレートを作成しました。私はpdf/print形式でもそれを保存したいと思います。

おかげ

Answer 1

私は多分非水平バージョンの印刷を期待していますほとんどの場合よ？あなたのケースでは、印刷メディアクエリにグリッドルールを適用しようとする可能性があります。

小さなグリッド（col-sm- *）デフォルトを使用する場合、b.e.あなたのgrid.lessで

<div class="container"> 

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

@media (min-width: @screen-tablet), print {で@media (min-width: @screen-tablet) {を交換する（参照、印刷を追加します。CSS media queries: max-width OR max-height） 再コンパイルブートストラップとあなたのPDFは今だけの画面のように/残っているだろう。あなたがあなたのケースのために特定のCSSルールを追加しようとする可能性が少なくないと

のような：

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

注print.lessは、印刷メディアのための特定のルールが含まれています。これは、ナビゲーションバーを例で非表示にするために使用されます。また、ユーティリティクラス：http://getbootstrap.com/css/#responsive-utilitiesにはPrintクラスがあります。私のプロジェクトでブートストラップCSSがロードされる前に

Answer 2

;

お使いのブラウザは@viewportを受け入れると（参照：http://docs.webplatform.org/wiki/css/atrules/@viewport）を、それが何を多分可能になります： @media印刷{} 1200px @viewport {幅}私は同じ問題を出しました。私はbootstrap.lessソースをインポートするapp.lessファイルを持っているので、私は次のよう

は、多分それはきれいな解決策ではない何それはブートストラップのgrid.lessファイルで行われています実際にある

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

が、それは3コード行離れている;）

Answer 3

私のために働いた印刷メディアクエリを追加する。これは私がついに遭遇したものです。

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