css - 打印 Bootstrap 页面时的颜色问题

Question

这个问题已经在多个论坛和 SO 中得到了回答。

我通过添加 col-sx-class 解决了网格布局问题，并且效果很好。我现在面临的问题是关于背景颜色。

根据许多答案和论坛的建议，我在 bootstrap.css 文件中对整个打印媒体查询进行了评论。

@media print { }

但打印时仍然没有显示颜色。下面提供了 HTML 代码。

问题 1:

<div class="alert alert-success" role="alert">Automation Tester</div>

上面的代码在浏览器中为 div 类添加了一种颜色。但在打印时，它只显示边框。

问题 2:

<div class="progress">
     <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
      </div>
      <span class="progress-type">CSS3</span>
      <span class="progress-completed">50%</span>
</div>

对于上面的代码，没有显示背景颜色。

实时 HTML 文档:http://purus.github.io/resume/

请尝试打印预览以上页面，您可以看到“摘要”和“技术技能”部分的实时差异。

Answer 1

如果您已经删除了媒体查询，请尝试在 Chrome 打印预览的其他打印选项中选中复选框 Background。默认关闭。

其他浏览器具有相同的功能。