Bootstrap 3 中的谷歌地图崩溃问题答案

【问题标题】：Google Maps collapse issue in Bootstrap 3Bootstrap 3 中的谷歌地图崩溃问题
【发布时间】：2014-03-06 02:04:16
【问题描述】：

我正在使用 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>

我面临的问题是包含地图的 div 包含谷歌地图。但是地图似乎已折叠。

任何想法为什么它可能无法正确呈现？

【问题讨论】：

您能发布您的 CSS 和/或制作一个 jsfiddle 吗？
我的 CSS 与 bootstrap 的默认 CSS 相同，只是更改了一些样式。
那么请把它贴出来，否则我帮不了你。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

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

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

【讨论】：

我在单击按钮时添加了地图 div，并将高度添加为 480 像素，但仍然无法正常工作。