Bootstrap 4：向模态添加副标题

Question

我实际上正在构建一个网站，我使用 Bootstrap，因为它非常有效，并确保每个人都有可能了解我的网站是如何工作的。

但事实是，我正在尝试使用模态来显示一些东西，我需要在其中添加一个副标题，我已经尝试了一些东西，但它们中的任何一个都可以正常工作。

我理想的模态看起来像这样：

我的理想模态

我想解决方案是在 HTML 和 CSS 文件中，但我是这些工作方式的新手，所以即使阅读了 Bootstrap 官方 CSS 模态页面，我也没有找到方法。

我已经试过了：

div在模态标题中添加另一个标题并编辑一些 css 但没有得到我想要的
- 尝试使用该width属性强制标题占据整行，但没有奏效。
- 尝试使用该justify-content属性，因为我们使用的是 flexboxes，但也没有用。
在标题h5内直接添加另一个标题 ( )，但结果与标题相同div

提前感谢您的时间和帮助。

Answer 1

对于带边距的标题和副标题，您可以向左填充。例如：

<h1>Title</h1>
<h2 class="pl-2">Sub Title</h2>

为了进一步演示，我为您创建了一个示例模式转到：https : //www.pateladitya.com/stackoverflow/modal-sample-dual-title.html

我认为您遇到的问题出在某些 css 中。检查您是否没有将标题和副标题显示为内嵌。

Answer 2

dom 使用 bootstrap 4 和以下 jsx 为我显示一个字幕：

<div class="modal-header">
    <h4 class="modal-title">SUPER TITLE
        <br>
        <small>SUB-TITLE</small>
    </h4>
</div>

另外，在我的测试中，嵌套h5（副标题）h4也有效......所以我很惊讶它对你不起作用。但是，我没有发布该答案，因为如果您尝试嵌套标头，它也会引发警告：

警告：validateDOMNesting(...)：react<h5>不能作为子项出现<h4>