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>

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

为什么它可能无法正确渲染的任何想法？

Answer 1

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

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

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

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

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

Google地图在Bootstrap 3中崩溃问题

1 个答案: