如何将 Bootstrap 按钮定位到导航选项卡的右侧？

Question

我正在使用 Bootstrap 的选项卡组件，但无法将蓝色登录按钮刷新到nav-tabs. 我尝试了各种方法，但显然我不明白为什么它不会定位在我想要的位置。

这是我正在尝试做的事情的图像：

HTML：

<section class="container">
  <ul class="nav nav-tabs pt-5">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Data</a></li>
    <li class="nav-item">
      <button type="button" class="btn btn-primary ml-2">Log In</button>
    </li>
  </ul>
</section>

JSFIDDLE： https ://jsfiddle.net/auov8ety/

Answer 1

简单地给ml-auto按钮

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<section class="container">
  <ul class="nav nav-tabs pt-5">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Data</a></li>
    <li class="nav-item ml-auto">
      <button type="button" class="btn btn-primary ml-2">Log In</button>
    </li>
  </ul>
</section>

小提琴：https : //jsfiddle.net/0fep392h/