在bootstrap 4 beta中，如何正确对齐最后一个导航项？

Question

我有这个简单的导航，在bootstrap 4中有三个导航项，beta：

<div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a>
      </li>
       <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a>
      </li>
       <li class="nav-item">
        <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a>
      </li>
    </ul>
 </div>

看起来像这样：

我想要的是，名为 Test3 的导航项在ul内正确对齐。

这是jsfiddle。

我该怎么做？

Answer 1

您可以将ml-auto添加到最后一项。这将左边距设置为auto，这意味着它将最大可用空间作为边距，因此它将跳转到右边。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a>
      </li>
       <li class="nav-item">
        <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a>
      </li>
       <li class="nav-item ml-auto">
        <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a>
      </li>
    </ul>
 </div>