如何获得一个openlayers地图以显示在twitter引导程序中？

Question

In a twitter bootstrap page, I have a 12 wide column inside a row. 在twitter引导页面中，我在一行中有一个12宽的列。 Above the 12 wide column is the navbar. 导航栏位于12宽栏的上方。 In the column is an open layers map and I need that column to take up the entire vertical space that remains under the navbar. 在该列中是一个开放的图层地图，我需要该列占用导航栏下方的整个垂直空间。 This does not work. 这是行不通的。 the map div shows up with 0px height. 地图div的高度为0px。 The only work around I found online is to add a width of 100% on html, body and the map div. 我在网上发现的唯一解决方法是在html，body和map div上添加100％的宽度。 that makes the map div span the entire document not just the column it is in. Thanks for any helpful pointers. 这样一来，地图div不仅可以覆盖整个文档所在的列，而且还可以覆盖整个文档。感谢您提供任何有用的指导。

bootstrap version : 3.0.3 ol version: 2.13.1 引导程序版本：3.0.3 OL版本：2.13.1

This does not help http://openlayers.org/dev/examples/bootstrap.html 这对http://openlayers.org/dev/examples/bootstrap.html没有帮助

<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Fixed Top Navbar Example for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

</head>

<body class="">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
    <a class="navbar-brand" href="#">Nav</a>
</div>
</nav>


<div style="padding: 0 15px">
<div class="row" style="">
    <div class="col col-md-12">
        <div id="mapDiv"></div>
    </div>

</div>
</div>
<!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/OpenLayers/OpenLayers.debug.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/view/home/presenter.js"></script>
<script>
(function () {
        console || console.log(mapDiv);
        var osm = new OpenLayers.Layer.OSM();

        var map = new OpenLayers.Map({
            div: "mapDiv",
            layers:[osm]
        });


        map.zoomToMaxExtent();
  })();
</script>
</body>
</html>

Answer 1

The example you refer to use Bootstrap version 2.2.1. 您引用的示例使用Bootstrap版本2.2.1。 your are using Bootstrap 3.0.3. 您正在使用Bootstrap 3.0.3。 There are many changes between version 2 and 3 of Twitter's Bootstrap, see also: Updating Bootstrap to version 3 - what do I have to do? Twitter的Bootstrap的版本2和版本3之间有许多更改，另请参见：将Bootstrap更新到版本3-我该怎么办？

In your case start reading: http://getbootstrap.com/getting-started/#third-parties 在您的情况下，请开始阅读： http : //getbootstrap.com/getting-started/#third-parties

The Openlayers' javascript add a class olMap to <div id="mapDiv"></div> use CSS to set it's height / width, like: Openlayers的javascript在<div id="mapDiv"></div>使用CSS设置类olMap来设置其高度/宽度，例如：

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

NB your html for the row and column looks strange, try: 注意，对于行和列，您的html看起来很奇怪，请尝试：

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

如何获得一个openlayers地图以显示在twitter引导程序中？

问题描述

1 个解决方案

解决方案1
0 2013-12-10 12:02:18

如何获得一个openlayers地图以显示在twitter引导程序中？

问题描述

1 个解决方案

解决方案1 0 2013-12-10 12:02:18

解决方案1
0 2013-12-10 12:02:18