Bootstrap-4：将面包屑与标题对齐

Question

我的页面上有一个标题和一些面包屑，它们当前没有对齐：

https://jsfiddle.net/martinradio/ondeph4a/2/

<br>
<nav>
<ol>
<h1 class="header-title">
My Title Page
</h1>
</ol>
</nav>


<!-- Breadcrumbs -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

我试图让我的面包屑与我的标题标题“产品 x ...”对齐，以便面包屑直接位于标题下方，而不是像现在这样在左侧。

很抱歉，我知道这个问题非常普遍，我一直在尝试使用 stackoverflow 上已经提出/解决的解决方案，例如：Right align text within Bootstrap 4 breadcrumbs

但是我的面包屑无法很好地对齐。任何帮助深表感谢;谢谢

Answer 1

也许这种方法会对您有所帮助：

  <!-- Breadcrumbs -->
  <div class="d-flex">
    <div class="mx-auto">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
      </nav>
    </div>
  </div>

结果如下：

或者试试这个：

<!-- Breadcrumbs -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item ml-4"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

结果如下：