此模态的正文内容溢出模态框，我怎样才能使文本保持在模态框内

Question

在我的 Angular 7 应用程序中，我们使用 bootstrap 4 进行样式设置。当此模态打开时，其中的文本溢出框外，如何修改 css 以使内容具有响应性并保持在模态中？

我正在调试别人的代码，所以我很难弄清楚他们是如何设置的。

这里是他们使用的模态元素，它实际上被设置为一个side element：

<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;
}

我假设它与位置有关：已修复，但我不确定如何更改它以使其在移动视图中响应。

Answer 1

我将从删除不必要的代码开始。这应该可以消除意外行为。

.d-flex 和 .justify-content 在这一点上是不必要的。如果需要它们，我建议将它们应用于 .modal-body 的子元素，位于 h4 标头下方。

此外，在 .modal-body 内，您可以删除 h4 周围的 div.row 并删除 .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>