Bootstrap - 打印预览中不显示进度条 [英] Bootstrap - progress-bar is not shown in print preview

问题描述

我在 JSFiddle 中做了一个简单的例子，我将打印出 Bootstrap 进度条在页面上的页面，但如果按下打印按钮，进度条不存在.有谁知道为什么?

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

我试过这样但没有成功新尝试

我的例子

解决方案

这是因为浏览器不打印背景(默认设置)，但它打印边框，我们可以使用它！我刚刚在 CSS 中为 @media 打印添加了这个(我的 LESS-CSS 代码):

@media print {.进步 {位置:相对；&:之前{显示:块；内容: '';位置:绝对；顶部:0；右:0；底部:0；左:0；z-索引:0；边框底部:@line-height-computed 实心@gray-lighter；}&-bar {位置:绝对；顶部:0；底部:0；左:0；z-索引:1；边框底部:@line-height-computed 实体@brand-primary；&-成功{边框底部颜色:@brand-success；}&-信息{边框底部颜色:@brand-info；}&-警告{边框底部颜色:@brand-warning；}&-危险{边框底部颜色:@brand-danger;}}}}

编译的 CSS(使用我的变量):

@media print {.进步 {位置:相对；}.progress:before {显示:块；内容: '';位置:绝对；顶部:0；右:0；底部:0；左:0；z-索引:0；边框底部:2rem 实心#eeeeee；}.进度条 {位置:绝对；顶部:0；底部:0；左:0；z-索引:1；边框底部:2rem 实心 #337ab7；}.progress-bar-success {边框底部颜色:#67c600；}.progress-bar-info {边框底部颜色:#5bc0de；}.progress-bar-warning {边框底部颜色:#f0a839；}.progress-bar-danger {边框底部颜色:#ee2f31；}}

在 Bootstrap 3 中就像一个魅力.

I have made a simple example in JSFiddle, I will print out pages where Bootstrap progress bars are at page but if the print button is pressed the progress bar is not there. Does anyone know why?

<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] I have tried it like this but with no success New try

My example

解决方案

This is because the browser doesn't print backgrounds (with default settings), but it prints borders and we can use it! I just added this in CSS for @media print (my LESS-CSS code):

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

Compiled CSS (with my variables):

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

Works like a charm in Bootstrap 3.

这篇关于Bootstrap - 打印预览中不显示进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！