Question

我有一个问题肯定已被问过10000次，但我真的不明白答案。我想做一些简单的事情：将我的屏幕划分为3列，在1列上添加一些按钮，在第二列中添加谷歌地图，在第3列中添加其他按钮。

我该如何正确地做到这一点？

我暂时将按钮添加到了我想要的位置，但是在管理地图时，我通常会遇到尺寸问题。

<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。

使用带有boostrap的网格系统添加谷歌地图

1 个答案: