Bootstrap 4 - 水平對齊內聯列表

Question

我正在將一個網站從Bootstrap 3.7遷移到Bootstrap 4.在我的網站中，我有一個橫跨頂部的橫幅，如下所示：

+-----------------------------------------------------------+
| Item 1   Item 2                      Item A Item B [note] |
+-----------------------------------------------------------+

左邊的項目是動態的。 右邊的項目是動態的。 偶然顯示[注釋]片段。 我使用Bootstrap 3.7正常工作。 但是，遷移到Bootstrap 4時，內容全部保持對齊。 你可以在這個Bootply中看到結果。 代碼如下所示：

<nav class="navbar">
  <div class="d-inline-flex" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>

    <ul class="nav list-inline justify-content-end">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>                
    </ul>

    <div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
  </div>
</nav>

我不明白為什么這些項目都是左對齊而不是填充頁面的寬度。 我錯過了什么？

Answer 1

正如這里所解釋的那樣， float在導航欄中不起作用，因為它現在是flexbox。 使用ml-auto將項目推向右側。

<nav class="navbar">
  <div class="d-inline-flex" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>
    <ul class="nav list-inline ml-auto">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>                
    </ul>
    <div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
  </div>
</nav>

https://www.codeply.com/go/CGBAvf8r1q

或者，您可以在第一個導航欄上使用mr-auto 。

Answer 2

你能把你的[note]項目放在你的第二個無序列表中，並在你的包裝div元素中使用justify-content-between嗎？ 看起來像這樣......

<nav class="navbar">
  <div class="d-inline-flex justify-content-between" style="width:100%;">
    <ul class="nav navbar-nav d-inline-flex">
      <li class="nav-item">
        <ul class="list-inline-mb-0">
          <li class="list-inline-item">Item 1</li>
          <li class="list-inline-item">Item 2</li>          
        </ul>
      </li>
    </ul>

    <ul class="nav list-inline">
      <li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
      <li class="list-inline-item">29th</li>
      <li class="list-inline-item">[note]</li>
    </ul>

  </div>
</nav>