如何在 Bootstrap 5 中使用带有标题标签的 large-text 面包屑？

Question

我想要大标题文本面包屑，但使用标题标签会破坏面包屑。有什么想法吗？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <h2>Org</h2>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <h3>Course</h3>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <h3>View</h3>
      </a>
    </li>
  </ol>
</nav>

Answer 1

标题元素默认为 block-level。只需修复面包屑结构即可。此外，删除边距并标准化字体大小。

.breadcrumb {
  font-size: 2em;
}

.breadcrumb h2,
.breadcrumb h3 {
  display: inline-block;
  margin: 0;
  font-size: 1em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <h2>Org</h2>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <h3>Course</h3>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <h3>View</h3>
      </a>
    </li>
  </ol>
</nav>

我认为这是对标题元素的滥用。它们应该只与您页面中的部分相关。您可以只使用 typographic style classes。在这里我也使用 <b> 标签，因为它只是为了风格而不是强调。

.breadcrumb {
  font-size: 1.4em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" id="org_breadcrumb">
      <span class="lead"><b>Org</b></span>
    </li>
    <li class="breadcrumb-item" id="course_breadcrumb">
      <a href="#">
        <span class="lead"><b>Course</b></span>
      </a>
    </li>
    <li class="breadcrumb-item" id="view_breadcrumb">
      <a href="#">
        <span class="lead"><b>View</b></span>
      </a>
    </li>
  </ol>
</nav>

如何在 Bootstrap 5 中使用带有标题标签的 large-text 面包屑？

How to have large-text breadcrumbs with heading tags in Bootstrap 5?

html

twitter-bootstrap

bootstrap-5