Отображение проблемы просмотра после добавления bootstrap 4 в openlayers

Question

Я разрабатываю карту webGIS с Openlayers 6. Она содержит множество виджетов и модулей, которые я пишу сам. все было хорошо, пока я не добавил в свой проект 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 для div, связанных с картой:

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

Я пытался изменить / удалить эти CSS, но ничего не произошло. Я также пробовал изменить z-индексы, но ничего. Проект еще не в сети, поэтому я не могу дать ссылку.

У меня действительно проблемы с этим, и я буду признателен за любую идею или решение, кроме перехода на bootstrap 3:))

С уважением, М. Махмудян

Answer 1

Похоже, вы хотите создать полноэкранную карту. Минимальный css для достижения этого - следующий css:

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

с контейнером карты, определенным следующим образом:

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

Еще одна важная вещь заключается в том, что вам нужно загрузить CSS Bootstrap перед CSS OpenLayers и вашего приложения. Для справки, это минимальный рабочий пример полноэкранной карты с включенным CSS Bootstrap 4: https://codesandbox.io/s/simple-5tixv.