Twitter Bootstrap专栏与Google地图无法合作

Question

我有一个愚蠢的CSS问题,但我似乎无法解决它.我正在将谷歌地图插入12尺寸的Twitter引导列:

<div class="col-lg-12" style="height:50%;">
   <div id="map-canvas" style="position:static !important;height:50%  !important;"></div>
</div>

我最终得到了地图加载,但它不占用任何空间/高度:

我试过在地图上添加一个高度.我已经尝试在列中添加高度,似乎没有任何效果.有人在这里向我展示了光明

Answer 1

你需要设置一个特定的像素高度#mapCanvas..

或确保mapCanvas容器(html,body)有一个高度..

html, body {
  height: 100%;
}

#map-canvas {
  margin: 0;
  padding: 0;
  height: 50%;
}

演示:http://www.bootply.com/118448