30

Twitter Bootstrap のビューを正しく印刷するのに本当に苦労しており、誰かが私を正しい方向に向けることができるかどうか疑問に思っていました。カスタムの「print.css」を追加しました。これは、元のブートストラップ スタイルの一部をオーバーライドするだけでなく、独自のコンポーネントのスタイル設定も行います。

これは私の印刷ダイアログです: ここに画像の説明を入力

画像からそう簡単にわかるかどうかはわかりませんが、ウェルの背景が失われ、ページ幅全体に広がっていません。また、「列」または「スパン」はすべて不安定なようです。ページは次のように構成されています: (きれいに保つために最初の行のみを表示します)

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="row-fluid">
                <div style="height: 150px; width: 300px">
                    <img class="img-rounded" src='data:image/png;base64,@Model.Unit.Image64' />
                </div>
            </div>

            <div class="row-fluid">
                ...
            </div>

        </div>
        <div class="span4">
            ...Pie chart control
        </div>
        <div class="span5">
            ...Bar chart control
        </div>

    </div>
</div>

これが私のprint.cssです：

@media print {
    body {
        margin: 0;
        padding: 0;
        line-height: 1.4em;
        word-spacing: 1px;
        letter-spacing: 0.2px;
        font: 13px Arial, Helvetica,"Lucida Grande", serif;
        color: #000;
    }

    #print-btn #update-btn #nav-left #nav-bar, #selectUnitContainer, .navbar, .sidebar-nav {
        display: none;
    }

    #print-btn, #update-btn, #units {
        display: none;
    }

    #nav-left {
        display: none;
    }

    #report-container {
        visibility: visible;
    }

    .well .span12{
        width: 100%;
        visibility: visible;
    }

    .navbar {
        display: none;
    }

    .sidebar-nav {
        display: none;
    }
}
4

1 に答える 1

62

まず、Bootstrap.css には次のような定義済みの印刷スタイルが付属しています。

/** 
 *  Use these for toggling content for print.
**/
.visible-print {
    display: block !important;
}

.hidden-print {
    display: none !important;
}

次に、改ページ css ルールを使用してテストし、チャートを別のページに分けて、書式設定をきれいにすることができます。

/** 
 *  Page-break-inside seems to
 *  be required for Chrome.
**/
div.somechart { 
   page-break-after: always; 
   page-break-inside: avoid;
}

/と / のパーセンテージに依存するのではなく、印刷画面で全幅を占めるように行をフォーマットして3 番目のテストを行います。span3col-*-3span4col-*-4

  • システム印刷ページ余白
  • Bootstrap の @print 定義のマージン
  • ページガター
  • 印刷画面でのスパン パーセンテージ。

最後に、注意するのに役立つ最後の小さなこと (カスタム@printスタイルにもかかわらず!):

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

に：

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="all" />
于 2013-09-24T08:26:28.683 に答える