Bootstrap 4：为模态框添加副标题的实现方法求助

嘿，我完全懂你现在的烦恼——刚上手Bootstrap搭网站，想给模态框加个副标题试了各种方法都没成，看着官方文档也有点懵对吧？别着急，其实只需要在HTML里加一点结构，再补几行简单的CSS就能搞定，咱们一步步来：

第一步：修改模态框的HTML结构 #

Bootstrap的模态框头部默认只有modal-title，没有现成的副标题类，但我们可以自己嵌套一个容器来放主标题和副标题，这样既不破坏原有结构，又能实现需求：

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#subtitleModal">
  打开带副标题的模态框
</button>

<!-- 带副标题的模态框 -->
<div class="modal fade" id="subtitleModal" tabindex="-1" aria-labelledby="subtitleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- 新增容器包裹主副标题，方便控制布局 -->
        <div class="modal-title-group">
          <h5 class="modal-title" id="subtitleModalLabel">我的主标题</h5>
          <!-- 用h6加Bootstrap自带的text-muted类做副标题，风格更统一 -->
          <h6 class="modal-subtitle text-muted">这是自定义的副标题内容</h6>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这里是模态框的主体内容...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确认操作</button>
      </div>
    </div>
  </div>
</div>

第二步：添加少量CSS调整样式 #

为了让副标题和主标题的排版更美观，我们可以加几行简单的CSS来控制间距和字号：

/* 让主副标题垂直排列，增加一点间距 */
.modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 主副标题之间的距离，可根据需求调整 */
}

/* 去掉h6默认的外边距，避免多余留白 */
.modal-subtitle {
  margin: 0;
  /* 可以自定义字号，这里用Bootstrap的小字号参考值 */
  font-size: 0.875rem;
}

为什么这个方法可行？ #

• 完全基于Bootstrap的原生结构，不会和框架自带的样式冲突
• 用了Bootstrap自带的text-muted类，副标题的灰色风格和默认模态框保持一致，不用自己调颜色
• 代码简单易懂，作为新手也能快速理解和修改

如果之前你尝试的方法没成功，大概率是没有正确嵌套元素，或者没有用容器来控制主副标题的布局。这个方案不需要你去深挖复杂的Bootstrap底层CSS，只需要跟着改结构和加几行样式就好啦～

内容的提问来源于stack exchange，提问作者Sayzeur