2

我正在使用 Openlayers 6 开发 webGIS 地图。它包含我自己编写的许多小部件和模块。一切都很好，直到我将 Bootstrap 4 添加到我的项目中。

添加 Bootstrap 4 后（Bootstrap 3 很好！）视图不再显示（只是一个空白 div）。首先，我认为可能有一些错误，但我检查了浏览器的控制台，没有错误！
这些是我添加的包：

Bootstrap 4.0.0
jQuery 3.4.1
Openlayers 6.0.1 css and js

在添加以下行之一之前，一切都很好：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

我一直在尝试不同的东西，但一无所获。最后，我添加了一个事件侦听器来查看更改。我在 map-div 中滚动鼠标。我在浏览器的控制台中看到了日志！！所以不显示核心代码是个问题。

这是我的与地图相关的 div 的 CSS：

html,
body,
#map {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    position: relative;
}

I tried to change/removing these css but nothing happens. I also tried changing z-indexes but nothing. The project isn't online yet so I can't give any link.

I really get into trouble with this and I will appreciate any idea or solution except switching to bootstrap 3 :))

Regards, M. Mahmoodian

4

1 回答 1

1

It looks like you want to create a full-screen map. The minimal css to achieve that is the following css:

  html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
  }

with a map container defined like this:

<div id="map"></map>

Another important thing is that you need to load the Bootstrap css before the css of OpenLayers and your app. For reference, this is a minimal working example for a full-screen map with Bootstrap 4 css included: https://codesandbox.io/s/simple-5tixv.

于 2019-11-18T12:09:50.070 回答