Bootstrap 和传单整合
Bootstrap and Leaflet Integration
我在结合我的网站（基于 bootstrap）和基于传单的网络地图时遇到问题。 Mapbox 瓦片垂直移动。
我认为问题是由于两个 .css（bootstrap 和传单）文件之间存在冲突。
这里 link 我的网页。 http://www.geo.uzh.ch/~fkaelin/Ex03.html.
如有任何建议，我将不胜感激。
非常感谢！
这有点奇怪，因为我已经多次使用 Leaflet 和 Bootstrap，但从未见过这种冲突。但是，你是对的，有冲突：
bootstrap.css:
img {
vertical-align: middle;
margin-bottom: 0px;
margin-top: 60px; /* here it is */
}
您的 bootstrap.css 为页面中的每张图片设置了 60 像素的边距。这也会影响 tilelayer 中的图像。您可以使用一些自定义样式来抵消这种情况：
div.leaflet-tile-container > img {
margin: 0;
}
但我猜你最好重新下载 bootstrap 或从 CDN 使用它，因为我在这个 Plunker 中没有看到这个问题：
http://plnkr.co/edit/fHtNdt?p=preview
还使用 Leaflet 7.3 和 Bootstrap 3.2.2，我有点困惑。
我在结合我的网站（基于 bootstrap）和基于传单的网络地图时遇到问题。 Mapbox 瓦片垂直移动。
我认为问题是由于两个 .css（bootstrap 和传单）文件之间存在冲突。
这里 link 我的网页。 http://www.geo.uzh.ch/~fkaelin/Ex03.html.
如有任何建议，我将不胜感激。
非常感谢！
这有点奇怪，因为我已经多次使用 Leaflet 和 Bootstrap，但从未见过这种冲突。但是，你是对的，有冲突：
bootstrap.css:
img {
vertical-align: middle;
margin-bottom: 0px;
margin-top: 60px; /* here it is */
}
您的 bootstrap.css 为页面中的每张图片设置了 60 像素的边距。这也会影响 tilelayer 中的图像。您可以使用一些自定义样式来抵消这种情况：
div.leaflet-tile-container > img {
margin: 0;
}
但我猜你最好重新下载 bootstrap 或从 CDN 使用它，因为我在这个 Plunker 中没有看到这个问题：
http://plnkr.co/edit/fHtNdt?p=preview
还使用 Leaflet 7.3 和 Bootstrap 3.2.2，我有点困惑。