Содержимое тела этого модального разлива выходит за пределы модального поля, как я могу сделать так, чтобы текст оставался внутри модального

Question

В моем приложении angular 7 мы используем bootstrap 4 для нашего стиля. Когда открывается этот модальный текст, текст внутри него выходит за пределы поля. Как я могу изменить CSS так, чтобы контент был адаптивным и оставался внутри модального?

Я отлаживаю чужой код, поэтомуМне трудно понять, как именно они это настроили.

Вот модальный элемент, который они используют, он фактически настроен как дополнительный элемент:

<aside class="modal fade model-demographic" tabindex="-1" id="name-information" role="dialog" aria-labelledby="System Warning" aria-hidden="true">
    <div class="demographic-name-dob modal-dialog modal-dialog-centered modal-lg  blue" role="document">
        <div class="modal-content modal-info-content">
            <div class="modal-header model-info-header">
                <h5 class="modal-title"><b>Name</b></h5>
            </div>
            <div class="modal-body d-flex justify-content">
                <div class="row">
                    <h4 class="col-12">To make any changes to your first name, middle initial or last name, please contact us.</h4>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-modal" aria-label="cancel">Close</button>
            </div>
        </div>
    </div>
</aside>

Из некоторых отладок я считаю, что это класс css, который они используют,вызывает проблему:

.modal-info-content {
  width: 55%;
  height: 35%;
  margin: 0px auto;
  position: fixed;
  top: 50px;
  right: 50px;
  bottom: 50px;
  left: 50px;
}

Я предполагаю, что это связано с position: fixed, но я не уверен, как это изменить, чтобы он реагировал в мобильном представлении.

Answer 1

Я бы начал с удаления ненужного кода. Это должно устранить непредвиденное поведение.

.d-flex и .justify-content на данном этапе не нужны. Если они необходимы, я бы порекомендовал применить их к дочернему элементу .modal-body, ниже вашего h4 заголовка.

Также внутри .modal-body вы можете удалить div.row вокругh4 и удалите класс .col-12. Оба они не нужны, поскольку тег h4 уже охватывает всю строку.

Ваш узел .modal-body будет выглядеть следующим образом:

<div class="modal-body">
  <h4>
    To make any changes to your first name, middle initial or last name, please contact us.
  </h4>
  <div class="d-flex justify-content">
    ...
  </div>
</div>