引導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>