Twitter Bootstrap列和谷歌地圖不能一起工作

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，體）具有高度..

html, body { 
    height: 100%; 
} 

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

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