如何使用Bootstrap 5实现元素边框嵌入文本标题的效果？

方案1：修复fieldset+legend在Bootstrap5下的默认样式 #

Bootstrap5的默认重置样式覆盖了fieldset、legend的原生边框嵌入效果，你只需要使用Bootstrap原生工具类调整样式，不需要额外写自定义CSS即可实现目标效果：

<fieldset class="border p-3 rounded">
  <legend class="float-none w-auto px-2 fs-5 fw-bold">AAA</legend>
  <!-- 此处放置内容区代码 -->
  <div class="p-2">
    示例内容示例内容示例内容示例内容
  </div>
</fieldset>

方案2：通用自定义实现（不依赖fieldset元素） #

如果需要更灵活的样式调整，可以用普通div配合Bootstrap定位工具类实现：

<div class="position-relative border rounded p-3 mt-3">
  <span class="position-absolute top-0 start-0 translate-middle-y ms-3 px-2 bg-white fs-5 fw-bold">AAA</span>
  <!-- 此处放置内容区代码 -->
  <div class="p-2">
    示例内容示例内容示例内容示例内容
  </div>
</div>

两种方案都不需要额外写jQuery逻辑，如果需要动态修改标题内容，直接用jQuery操作对应标题元素的文本即可：

// 方案1修改标题示例
$('legend').text('新标题')
// 方案2修改标题示例
$('.position-absolute').text('新标题')

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