Question

我正在尝试打印位于引导程序面板内的Google地图画布，如下所示：

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

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

部分图片：

在页面

在打印框

Answer 1

通过从Bootstrap CSS的@media print部分有选择地删除各行，我发现当我删除img {max-width...}行时，我的地图会回来：

@media print { //...there's other stuff above here img { max-width: 100% !important; } //...there's other stuff below here }

您还可以通过在导入引导程序的位置添加以下内容来覆盖此效果（与从BS代码中删除）：

@media print { img { max-width: none !important; } }

请注意，我在上面的代码示例中使用了Sass;我正在使用Rails项目，因此我通过bootstrap-sass gem查看BS代码。等效的Less或vanilla CSS应该很容易实现。

很多人仍在努力查看它是否真的是一个修复和/或此更改是否有附带损害......可能希望将其与包含您的地图的div隔离开来。

编辑：看起来这一行实际上来自HTML5Boilerplate项目中的代码，该项目包含在Bootstrap中。我在H5BP项目上创建了一个最小的演示页面和opened an issue。

2016年7月21日更新：对此的修复为slated for inclusion with BS 4。

Answer 2

画布的宽度太大。我设定了一个限制，它起作用了。