Bootstrap - 在打印預覽中未顯示進度條

我在JSFiddle中做了一個簡單示例，我將打印出Bootstrap進度條位於頁面的頁面，但如果按下打印按鈕，則進度條不在此處。有誰知道爲什麼？Bootstrap - 在打印預覽中未顯示進度條

<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>

[編輯] 我已經嘗試過這樣的，但沒有成功New try

My example

來源

2017-05-31 quma

你必須設置在CSS @media打印。我認爲，答案就在這裏給出： Bootstrap 3 - printing colors on progress bars?

來源

2017-05-31 12:09:54 Janserino

嗯，它不以任何理由的工作，我不知道爲什麼。 – quma

獨立於您屏幕的CSS您打印的CSS。

這是通過你的情況@media print和@media screen

做，你可以添加此@media print CSS規則是這樣的：

@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

來源

2017-05-31 14:33:28

這是因爲瀏覽器不打印背景（默認設置），但它打印邊界，我們可以用它！我只是說這個在CSS的@media打印（我不太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（我的變量）：

@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; 
} 
}

作品就像在引導3

魅力

來源

2017-09-14 10:00:37 xixe

輝煌！真的很有幫助。奇蹟般有效。 – Rbbn

這對大多數人來說是顯而易見的，但讓我們向閱讀人員添加以下內容：
1：使用上面的@xixe中的代碼創建樣式表，並將其另存爲print.css。
2：將此插入到您的HTML頁面
<link rel="stylesheet" type="text/css" media="print" href="print.css">
3：現在打印。

另外：對於一個完整的CSS，可以幫助印刷引導3的東西，你可以在此頁面上獲得了良好的CSS https://daneveland.com/content/printing-bootstrap

來源

2018-01-13 14:46:11 Rbbn

Bootstrap - 在打印預覽中未顯示進度條

回答

相關問題