Jquery 如何在bootstrap 4中对导航链接元素进行不同的对齐？

使用bootstrap 4，我有以下3个导航链接元素：

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Item1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item3</a>
  </li>
</ul>

我的问题是：如何保持Item1和Item2左对齐（就像现在一样），而使Item3右对齐

---

我已经创建了一个jsfiddle。

您可以使用

左边距：auto

，因为该行是

flex

父行，flex子行上的自动左边距将填充可用空间

正文{
利润率：10px；
}
李海军：最后一个孩子{
左边距：自动；
}

只需在最后一项上使用

ml auto

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Item1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item2</a>
  </li>
  <li class="nav-item ml-auto">
    <a class="nav-link" href="#">Item3</a>
  </li>
</ul>

---

在JSFIDLE中尝试您的代码时，我无法让它工作：@brinch您使用的是bootstrap 4中较旧的alpha，包括bootstrap 3。。。删除这些内容并包含最新的alpha