twitter-bootstrap - 打印时谷歌地图 Canvas 变得空白(Ctrl + P)

Question

我正在尝试打印 Bootstrap 面板内的谷歌地图 Canvas ，如下所示:

<div class="panel panel-default">
    <div class="panel-body">
        <div id="map">...</div>
    </div>
</div>

我正在尝试以一种简单的方式打印，只需按 CTRL + P .但是在打印可视化框中， map 是空白的。会发生什么？

一些图片:


在页面



在打印盒

Answer 1

通过有选择地从 @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 .