在 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>