如何在Bootstrap 5中使用标题标签实现大文本面包屑且不破坏原有样式

h2、h3属于块级标题标签，自带默认外边距、行高和独占行特性，插入到面包屑的行内布局结构中就会破坏原有排列效果，可选用以下3种方案解决：

• 方案1：保留h标签语义，重置默认样式
  如果你需要保留h2、h3的页面标题语义，只需要给面包屑内的标题标签添加样式重置规则，覆盖默认属性即可。将以下CSS放在Bootstrap样式表之后加载：

.breadcrumb h2, .breadcrumb h3 {
  display: inline; /* 改为行内元素和面包屑其他元素保持同行 */
  margin: 0;
  padding: 0;
  font-size: inherit; /* 继承面包屑的字体大小，也可以自定义数值 */
  font-weight: inherit;
  line-height: inherit;
}

修改后原有HTML结构不需要变动，同时兼容语义要求和样式展示。

• 方案2：替换标签，用ARIA属性补充语义
  如果不想额外写CSS重置规则，可以把h2、h3替换为没有默认样式的span标签，通过ARIA属性实现和标题标签等价的语义效果，HTML修改示例如下：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <span role="heading" aria-level="2">Org</span>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <span role="heading" aria-level="3">Course</span>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <span role="heading" aria-level="3">View</span>
      </a>
    </li>
  </ol>
</nav>

• 方案3：不需要标题语义时直接用工具类调整字号
  如果只是想要面包屑的文本字号更大，没有SEO或无障碍的标题语义要求，可以直接用Bootstrap自带的字体工具类调整大小，不需要额外加标签或样式，比如给ol标签添加fs-4类整体放大所有面包屑文本，或者给单个面包屑项加fs-3 fw-bold类单独放大当前项。

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