添加谷歌地图使用网格系统与助推器

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了解更多信息。