Question

在twitter引导程序页面中，我在一行中有一个12宽的列。导航栏位于12宽列之上。在列中是一个开放的图层地图，我需要该列来占据保留在导航栏下方的整个垂直空间。这不起作用。地图div显示高度为0px。我在网上找到的唯一工作就是在html，body和map div上添加100％的宽度。这使得map div跨越整个文档而不仅仅是它所在的列。感谢任何有用的指针。

bootstrap版本：3.0.3 ol版本：2.13.1

这无效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

您引用的示例使用Bootstrap 2.2.1版。你正在使用Bootstrap 3.0.3。 Twitter的Bootstrap版本2和版本3之间有很多变化，另请参阅：Updating Bootstrap to version 3 - what do I have to do?

在您的情况下，请先阅读：http://getbootstrap.com/getting-started/#third-parties

Openlayers的javascript将一个类olMap添加到<div id="mapDiv"></div>使用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>

如何在twitter bootstrap中显示openlayers地图？

1 个答案: