添加谷歌地圖使用網格系統與助推器

Question

我有一個問題，已被肯定問過10000次，但我真的不明白答案。 我想做一些簡單的事情：將我的屏幕分爲3列，在1列中添加一些按鈕，在第二列中添加谷歌地圖，在第三列中添加其他按鈕。

我該如何設法正確地做到這一點？

現在，我在需要的地方添加了按鈕，但是當涉及到管理地圖時，我通常會遇到大小問題。

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4"> 
     <button type="button" class="btn btn-primary btn-lg">1</button> 
     <button type="button" class="btn btn-default btn-lg">2</button> 
    </div> 

    <div class="col-lg-4"> 
     <div id="map-container" style="width: 500px; height: 300px;"></div> 
    </div> 
    <div class="col-lg-4"> 
     <form class> 
      <b>Point A : <input type="text" class="form-control"></b> 
      <b>Point B : <input type="text" class="form-control"><b> 
      <button>Validate</button> 
     </form> 
    </div> 
    </div> 

    <div class="row"> 
    <br></br> 
    </div> 

    <div class="row"> 
    <div class="col-lg-4"></div> 
    <div class="col-lg-4"> 
     <button type="button" class="btn btn-success sharp">Good</button> 
     <button type="button" class="btn btn-warning sharp">Normal</button> 
     <button type="button" class="btn btn-danger sharp">Bad</button> 
    </div> 
    <div class="col-lg-4"></div> 
    </div> 
</div> 

Answer 1

您應該設置地圖高度樣式，但不是寬度。您還應該設置：

#map-container img { 
    max-width: none; 
} 

請參閱this question on stackoverflow瞭解更多信息。