css - Bootstrap 4 - 水平对齐内联列表

Question

我正在将网站从 Bootstrap 3.7 迁移到 Bootstrap 4。在我的网站中，我在顶部有一个横幅，如下所示:

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

左边的元素是动态的。右边的元素是动态的。 [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

作为explained here 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。