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

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 class 导致了问题：

.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 的 child 元素，位于 h4 header.

下方

此外，在 .modal-body 内，您可以删除 h4 周围的 div.row 并删除 .col-12 class。这些都是不必要的，因为 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>

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

The body content of this modal spills outside of the modal box, how can I make it so the text stays within the modal

css

modal-dialog

bootstrap-4

angular7