Twitter Bootstrap 和 OpenLayers 将地图缩小 100 像素答案

【问题标题】：Twitter Bootstrap & OpenLayers Shrinking Map by 100pxTwitter Bootstrap 和 OpenLayers 将地图缩小 100 像素
【发布时间】：2013-06-13 05:27:58
【问题描述】：

我正在使用 Twitter Bootstrap 和 Open Layers 在页面上显示地图：

http://tinypic.com/r/2qu826t/5

地图应该在 div id="OpenLayers.Layer.Image_84" 的左侧和上方 100 像素处（蓝色轮廓）。

它也应该是 1024 像素宽；相反，它被截断为大约 823。

结果可以在包含地图图块（1024x1024 png）的 div 中看到：

<img class="olTileImage" style="visibility: inherit; opacity: 1; position: absolute; left: 101%; top: 0%; width: 822.944%; height: 1024%;" src="/static/img/maps/seattle.png"

如果我手动将left:101% 更改为left:1% 并将width:822.944% 更改为width:1024% 一切看起来都正确。但我不知道是什么以编程方式导致了这个错误。

另外，我在非 Bootstrap 沙箱中使用了完全相同的代码，它运行良好。因此，我假设是与 Bootstrap 的冲突导致了这种情况。

有人有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap gis openlayers

【解决方案1】：

我认为这个问题只发生在 Openlayers 2.12 中。尝试添加这个 css 代码：

.olMapViewport img {
    max-width: none;
}

【讨论】：

谢谢；原来错误是试图将方形图像块拟合到非方形边界。方形图像块和矩形空间之间约 10% 的间隙导致了此问题。

【解决方案2】：

所以这不是 Bootstrap 和 OpenLayers 之间的冲突，而是错误地将方形地图图块拟合到矩形边界。

以下是概述： 1）我将地图大小设置为正方形 2) 我将地图边界设置为我认为的正方形，但实际上是一个矩形，其宽度约为正方形的 80%

OpenLayers 尝试通过添加 left 属性并压缩地图图块来协调这些。

当我正确地将地图边界设置为正方形时，问题就消失了。

【讨论】：

OL团队过几天会发布2.13版本，不使用百分比...不用担心这个了。