Bootstrap-4 :将breadcrumbs与标题对齐

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>

​

我正在尝试让我的面包屑与我的标题"Product 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>

它的结果是：

​

​