引导4中的nav-link元素如何具有不同的对齐方式？

Question

使用引导程序4，我具有以下3个nav-link元素：

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

Answer 1

只需在最后一项上使用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>

https://www.codeply.com/go/XkfSjbcdDb

Answer 2

您可以使用margin-left: auto因为该行是flex父级，而flex child上的auto左边距将填充可用空间。

 body { margin: 10px; } .nav li:last-child { margin-left: auto; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <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>