Javascript 如何获取openlayers地图以显示在twitter引导程序中？

在twitter引导页面中，我在一行中有一个12宽的列。12宽栏上方是导航栏。在该列中是一个开放的图层地图，我需要该列占据导航栏下的整个垂直空间。这是行不通的。地图div显示为0px高度。我在网上找到的唯一解决办法是在html、body和map div上添加100%的宽度。这使得map div跨越整个文档，而不仅仅是它所在的列。谢谢你的指点

引导版本：3.0.3 ol版本：2.13.1

这没有帮助

用于引导的固定顶部导航栏示例
（功能（）{
console | | console.log（mapDiv）；
var osm=新的OpenLayers.Layer.osm（）；
var map=new OpenLayers.map({
分区：“地图分区”，
图层：[osm]
});
zoomToMaxExtent（）；
})();

您提到的示例使用引导版本2.2.1。您正在使用Bootstrap 3.0.3。Twitter的引导版本2和3之间有很多变化，另请参见：

在你的情况下，开始阅读：

Openlayers的javascript向

添加一个类

olMap

，使用CSS设置其高度/宽度，如：

div.olMap
{
  cursor: default;
  height: 500px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  z-index: 0;
}

注意：行和列的html看起来很奇怪，请尝试：

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="mapDiv"></div>
    </div>
  </div>
</div>

这里有一个工作示例：确保在包含地图的div上设置像素高度。我无法设置像素高度，因为我希望它占据整个垂直空间。谢谢。我无法设置特定的像素高度，因为我希望贴图占据剩余的所有垂直空间。再次感谢。使用jquery计算可用高度并根据它设置css的高度？我可以做到。调整屏幕大小后，它将如何工作？我不希望滚动条出现！谢谢也许可以试试这个：并使用重新计算

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="mapDiv"></div>
    </div>
  </div>
</div>