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在第一个导航中使用.