Bootstrap 4：为模态添加字幕

Question

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

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

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

我想解决方案是在HTML＆amp; CSS文件，但我是那些工作方式的新手，所以即使阅读Bootstrap官方CSS模式的页面，我也没有设法找到它的方法。

我已经尝试过：

• 在模态标题内添加另一个标题div并编辑了一点css，但没有设法得到我正在寻找的
  • 尝试使用width属性强制标题占据整行，但没有效果。
  • 尝试使用justify-content属性，因为我们使用的是flexbox，但也没有用。
• 直接在标题内添加其他标题（h5），但结果与div
相同

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

Answer 1

您是否尝试过Flexbox？

<div style="flex-direction:column;">
   <h1 class="modal-title">Title</h5>
   <h2>Sub Title</h2>
</div>

Answer 2

我使用Scala.js，但最终dom使用带有以下jsx的bootstrap 4为我显示了一个字幕：

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

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

  

警告：validateDOMNesting（...）：反应<h5>不能作为<h4>的子代出现

Answer 3

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

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

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

我认为你遇到的问题是在某些问题上。检查您是否未将标题和副标题显示为内联。

Answer 4

您目前使用的是h4元素，因此您可以为自己做的最简单的方法是将标题减少到h2或h1，直到您满意为止。