在 openlayers 中添加 bootstrap 4 后显示视图问题

Question

我正在使用 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 中滚动鼠标。我在浏览器的控制台中看到了日志！！所以显示不是核心代码的问题

这是我的 CSS 地图相关 divs:

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

我尝试 change/removing 这些 css 但没有任何反应。我也尝试更改 z-indexes 但没有。该项目尚未上线，所以我无法提供任何 link.

我真的遇到了麻烦，除了切换到 bootstrap 3 :))

之外，我将不胜感激任何想法或解决方案

此致， M·马哈茂德

Answer 1

您似乎想要创建全屏地图。实现该目标的最小 css 如下 css:

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

使用这样定义的地图容器：

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

另一个重要的是你需要在OpenLayers和你的应用程序的css之前加载Bootstrap css。作为参考，这是包含 Bootstrap 4 css 的全屏地图的最小工作示例：https://codesandbox.io/s/simple-5tixv.

在 openlayers 中添加 bootstrap 4 后显示视图问题

Displaying view issue after adding bootstrap 4 in openlayers

openlayers

bootstrap-4

openlayers-6