twitter-bootstrap - 如何将 Bootstrap 按钮放置在导航选项卡的右侧？

Question

这个问题已经有答案了:

Bootstrap 4 alpha 6 nav-tabs align item right (2 个回答)

已关闭 4 年前。

我正在使用 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>

fiddle :https://jsfiddle.net/0fep392h/