ブートストラップ - 印刷プレビューにプログレスバーが表示されない

Question

JSFiddleで簡単な例を作成しましたが、ブートストラップの進行状況がページに表示されるページを印刷しますが、印刷ボタンを押してもプログレスバーは表示されません。なぜ誰が知っていますか？

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
    <span class="sr-only">60% Complete</span> 
    </div> 
</div> 

[EDIT] 私はこのようにそれを試みたが成功しませんNew try

My example

Answer 1

であなたはCSSで@media印刷を設定する必要があります。私は答えがここに与えられていると思う：あなたの画面のCSSからご印刷用CSS Bootstrap 3 - printing colors on progress bars?

Answer 2

セパレート。

この

はこのように、あなたはこの @media print CSSルールを追加することができますあなたのケースで @media printと @media screen

を介して行われます：

@media print { 
    /* All your print styles go here */ 
    .progress{ 
    background-color: #f5f5f5 !important; 
    border-radius: 4px !important; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important; 
    } 
    .progress-bar{ 
    background-color: #428bca !important; 
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15) !important; 
    } 
} 

@media印刷：ページング材料用や文書を対象印刷プレビューモードで画面に表示されます。

は、ブラウザが（デフォルト設定の）背景を印刷しませんので、これはですが、それは国境を印刷し、我々はそれを使用することができます！Updated Fiddle

Answer 3

を参照してください。 私は@mediaプリント（私のLESS-CSSコード）のためにCSSでこれを追加しました：（私の変数を持つ）

@media print { 
.progress { 
    position: relative; 
    &:before { 
     display: block; 
     content: ''; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     z-index: 0; 
     border-bottom: @line-height-computed solid @gray-lighter; 
    } 
    &-bar { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     z-index: 1; 
     border-bottom: @line-height-computed solid @brand-primary; 
     &-success { 
      border-bottom-color: @brand-success; 
     } 
     &-info { 
      border-bottom-color: @brand-info; 
     } 
     &-warning { 
      border-bottom-color: @brand-warning; 
     } 
     &-danger { 
      border-bottom-color: @brand-danger; 
     } 
    } 
} 
} 

コンパイルCSS：ブートストラップ3

で魔法のように

@media print { 
.progress { 
    position: relative; 
} 
.progress:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 0; 
    border-bottom: 2rem solid #eeeeee; 
} 
.progress-bar { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1; 
    border-bottom: 2rem solid #337ab7; 
} 
.progress-bar-success { 
    border-bottom-color: #67c600; 
} 
.progress-bar-info { 
    border-bottom-color: #5bc0de; 
} 
.progress-bar-warning { 
    border-bottom-color: #f0a839; 
} 
.progress-bar-danger { 
    border-bottom-color: #ee2f31; 
} 
} 

作品

Answer 4

ほとんどの人が分かりますが、読んだ人に次のように追加しましょう。
1：上記の@xixeのコードでスタイルシートを作成し、print.cssとして保存します。
2：これをHTMLページに挿入してください
<link rel="stylesheet" type="text/css" media="print" href="print.css">
3：今すぐ印刷してください。

さらに：印刷ブートストラップ3のものを助け、フルCSSについては、あなたがhttps://daneveland.com/content/printing-bootstrap