css - Bootstrap 3 中的 Google map 崩溃问题

Question

我正在使用 bootstrap 3 并有一个容器如下:

<div class="box-content" id="ToolsContainer">
   <ul class="nav nav-tabs" id="myTab">
     <li><a href="#home" data-toggle="tab">Access</a></li>
     <li class="active"><a href="#profile" data-toggle="tab">Map</a></li>
   </ul>
   <div class="tab-content" id="myTabContent">
      <div class="tab-pane" id="home"></div>
      <div class="tab-pane active" id="profile">
          <div id="map" style="width:100%;height:100%"></div?
      </div>
   </div>
</div>

我面临的问题是包含 map 的 div 包含谷歌地图。但是 map 看起来是折叠的。

关于它可能无法正确呈现的任何想法？

Answer 1

100% 高度将不起作用，除非 map 的容器也是 100%..

html, body, .container, .tab-content, .tab-pane  {
  height: 100%;
}

或者，您可以为 map 指定像素高度..

#map {
  width:100%;
  height:480px;
}

示例:http://www.bootply.com/119078