如何在bootstrap 4中对nav-link元素进行不同的对齐？

Question

使用bootstrap 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 here。

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>

Answer 2

您可以使用val batchSize = 10 val sem = new Semaphore(batchSize) items.foreach { it => sem.acquire processB(Seq(It)) .andThen { case _ => sem.release } .onComplete { ... } } ，因为该行是margin-left: auto父级，并且Flex子级上的自动左边距将填充可用空间。

flex

body {
    margin: 10px;
}

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