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>

我不理解为什么这些项目都是左对齐的，而不是填充整个页面的宽度。我错过了什么吗？

- user70192

Answer 1

如这里所解释的那样，由于现在使用的是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。

- Zim

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> 

- Jade Cowan