如何在 Bootstrap 5 模态框头部实现标题与副文本垂直堆叠并居中显示

Bootstrap 5 的 .modal-header 默认使用 display: flex 布局，导致子元素（如和）水平排列；只需添加 flex-column 或 d-block 工具类即可改为垂直流式布局，并结合默认的 align-items: center 实现居中效果。

bootstrap 5 的 `.modal-header` 默认使用 `display: flex` 布局，导致子元素（如 `

` 和 `

`）水平排列；只需添加 `flex-column` 或 `d-block` 工具类即可改为垂直流式布局，并结合默认的 `align-items: center` 实现居中效果。

在 Bootstrap 5 中，.modal-header 内置了 display: flex 及 flex-direction: row 样式，这是其响应式设计的基础，但也意味着直接嵌套多个块级元素（如 <h1></h1> 和 <p></p>）时，它们会默认横向并排——即使你为每个子元素添加 d-block，也无法改变父容器的 flex 主轴方向。

✅ 推荐方案：使用 flex-column
该方式最符合语义与设计意图：它将 flex 主轴转为纵向（flex-direction: column），同时保留 align-items: center（Bootstrap 默认已设置），因此标题与副文本天然垂直堆叠且水平居中：

<div class="modal-header flex-column">
  <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
  <p class="mb-0 text-center">Please review this product! Thank you for your cooperation!</p>
</div>

⚠️ 注意：为 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 添加 mb-0 可消除默认下边距（避免与 .modal-body 间距过大），text-center 则进一步确保纯文本内容在小屏等场景下严格居中（因 align-items: center 对齐的是 flex 项目本身，而内联文本需额外声明）。

❌ 替代方案：d-block 虽可行，但会完全退出 Flex 布局，失去 align-items 的对齐能力，此时需手动补充 text-center 到父容器或每个子元素，可维护性较低：

<!-- 不推荐：需额外处理居中 -->
<div class="modal-header d-block text-center">
  <h1 class="modal-title fs-5 mb-2">Review of "Product Name"</h1>
  <p class="mb-0">Please review this product! Thank you for your cooperation!</p>
</div>

? 总结建议：