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 - 在打印预览中未显示进度条

回答

相关问题