我正在尝试打印 Bootstrap 面板内的谷歌地图 Canvas ，如下所示:
<div class="panel panel-default">
<div class="panel-body">
<div id="map">...</div>
</div>
</div>
我正在尝试以一种简单的方式打印，只需按
CTRL + P .但是在打印可视化框中， map 是空白的。会发生什么？一些图片:
在页面
在打印盒
最佳答案
通过有选择地从 @media print 中删除多行Bootstrap CSS 的部分我发现当我删除 img {max-width...} 时我的 map 又回来了线:
@media print {
//...there's other stuff above here
img {
max-width: 100% !important;
}
//...there's other stuff below here
}
您还可以通过在导入 Bootstrap 的下方添加以下内容来覆盖此效果(而不是从 BS 代码中删除):
@media print {
img {
max-width: none !important;
}
}
请注意，我在上面的代码示例中使用了 Sass；我在 Rails 项目中，所以我正在通过 bootstrap-sass 查看 BS 代码 gem 。等效的 Less 或 vanilla CSS 应该很容易实现。
很多人仍在为此努力，看看它是否真的是一个修复和/或这个变化是否有附带损害......可能想把它隔离到 div包含您的 map 或其他东西。
编辑:看起来这一行实际上来自 HTML5Boilerplate 项目中的代码，该项目包含在 Bootstrap 中。我创建了一个最小的演示页面和 opened an issue关于H5BP项目的这个。
2016 年 7 月 21 日更新:对此的修复是 slated for inclusion with BS 4 .
关于twitter-bootstrap - 打印时谷歌地图 Canvas 变得空白(Ctrl + P)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32790057/