我正在尝试使用Leaflet.js在Twitter Bootstrap的选项卡式面板内显示地图，但行为方式很奇怪：
当我单击包含面板的选项卡时，地图顶部有一个灰色层。如果拖动并移动地图，我会看到其他图块，但看不到初始图块。
更奇怪的是，如果我调整浏览器的大小，突然间它可以正常工作，直到我再次重新加载，所以我猜这是css的问题，但我找不到问题。
同样，将地图放置在选项卡式面板之外也很有效。
我在Firefox和Chrome中进行了测试，但都存在相同的问题。
任何帮助都非常感谢！
完全摆脱了leaflet.js源代码，这是一个完整的技巧，但它可以工作（至少在jsFiddle中有效）
这个想法来自Google Maps，当其容器div调整大小时“调整”或“重绘”地图。
我所做的更改是：
link3在HTML的小标签中添加ID
link3
<a href="#lC" data-toggle="tab" id="link3">tab3</a>
在此选项卡中添加一个侦听器 $(function() {
$(function() {
$("body").on('shown','#link3', function() { L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container); });
requestAniMFrame行来自leaflet.js中的trackResize
从评论更新 ：嗨，我用map.invalidateSize（false）; 而不是L.Util.requestAnimFrame（…，这似乎也可行。只是以为我会指出这一点。不过，很好的答案！– Herr Grumps
