如何在Bootstrap 4中垂直对齐导航栏切换？

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </nav>
  
  <div class="content">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="content1">
        <h3>Content 1</h3>
        <p>This is the content for tab 1.</p>
      </div>
      <div class="tab-pane fade" id="content2">
        <h3>Content 2</h3>
        <p>This is the content for tab 2.</p>
      </div>
      <div class="tab-pane fade" id="content3">
        <h3>Content 3</h3>
        <p>This is the content for tab 3.</p>
      </div>
    </div>
  </div>
</div>