如何在此引导程序基础导航的右侧放置一个按钮？

Posted 2023-03-21

【中文标题】如何在此引导程序基础导航的右侧放置一个按钮？

【英文标题】：How do I place a button on the right side of this bootstrap base nav?

【发布时间】：2022-01-06 06:44:20

【问题描述】：

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

<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>

【问题讨论】：

你真的在使用 Bootstrap 4.0 吗？那是很老了。见getbootstrap.com/docs/4.6/utilities/flex/#enable-flex-behaviors

【参考方案1】：

<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>

【讨论】：

垂直对齐不完美，抱歉。按钮垂直位置高于文本链接一个。

还将align-items-center 放在nav 元素上。

【参考方案2】：

尝试将 ml-auto 添加到“TRY NOW”按钮

<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>

【讨论】：

垂直对齐不好，抱歉