Bootstrap导航栏元素移动：如何将Pay按钮调整至导航栏右侧角落

问题原因 #

• 你使用的是Bootstrap导航栏组件，默认.navbar-collapse和其子容器.navbar-nav的宽度不会自动占满导航栏的剩余横向空间，单独给按钮设置margin-right: 0是相对于父容器的右边缘，父容器本身没有贴靠导航栏右侧，自然不会生效。
• Flex布局下要将单个子元素推到容器最右侧，正确的写法是给该元素设置margin-left: auto，而非margin-right: 0，且需要父容器为flex布局且占满可用宽度。

解决方案 #

推荐直接用Bootstrap自带的工具类实现，无需自定义样式，两种常用实现方式：

方式1：调整结构分离按钮

将Pay按钮从.navbar-nav中移出，给.navbar-collapse添加justify-content-between类，让左侧导航链接和右侧按钮自动分布在两端：

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
  <a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
  <div class="collapse navbar-collapse justify-content-between" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a href="/cars.html" class="nav-link text-light">Cars</a>
      <a href="/tools.html" class="nav-link text-light">Tools</a>
    </div>
    <button type="submit" class="btn">Pay</button>
  </div>
</nav>

方式2：给按钮添加自动左外边距

如果不想调整结构，给.navbar-nav添加w-100类让其占满整行宽度，同时给Pay按钮添加ms-auto类（Bootstrap4用ml-auto）即可：

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
  <a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav w-100">
      <a href="/cars.html" class="nav-link text-light">Cars</a>
      <a href="/tools.html" class="nav-link text-light">Tools</a>
      <button type="submit" class="btn ms-auto">Pay</button>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者nostradam