如何在此 bootstrap 基本导航的右侧放置一个按钮？

Question

这是我从这个主题派生的代码：https://getbootstrap.com/docs/4.0/components/navs/#base-nav (Boostrap v4.0)。如何将“立即试用”按钮放置在此 bootstrap 基本导航的右侧？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="nav">
  <a class="nav-link active" href="#">Overview</a>
  <a class="nav-link" href="#">Features</a>
  <a class="nav-link" href="#">Gallery</a>
  <a class="nav-link" href="#">Resources</a>
  <a class="btn btn-primary btn-sm" href="#" role="button">TRY NOW</a>
</div>

Answer 1

尝试将 ml-auto 添加到“立即尝试”按钮

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="nav">
  <a class="nav-link active" href="#">Overview</a>
  <a class="nav-link" href="#">Features</a>
  <a class="nav-link" href="#">Gallery</a>
  <a class="nav-link" href="#">Resources</a>
  <a class="btn btn-primary btn-sm ml-auto" href="#" role="button">TRY NOW</a>
</div>

Answer 2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="nav align-items-center">
  <a class="nav-link active" href="#">Overview</a>
  <a class="nav-link" href="#">Features</a>
  <a class="nav-link" href="#">Gallery</a>
  <a class="nav-link" href="#">Resources</a>
  <div class="ml-auto">
    <a class="btn btn-primary btn-sm " href="#" role="button">TRY NOW</a>
  </div>
</div>

如何在此 bootstrap 基本导航的右侧放置一个按钮？

How do I place a button on the right side of this bootstrap base nav?

twitter-bootstrap

bootstrap-4