如何将Bootstrap导航栏（navbar）中的按钮对齐到右侧

解决方案 #

Bootstrap的导航栏默认启用了弹性盒（flex）布局，你只需要利用Bootstrap自带的间距工具类就能实现按钮右对齐，同时注意不要给按钮添加container类，这个类是用于页面内容容器的，会破坏按钮的布局表现。

适用Bootstrap 4/5的方案

给需要右对齐的按钮添加ms-auto类，这个类会自动给元素添加左侧的外边距，将元素推到容器最右侧：

<nav class="navbar navbar-light bg-light">
  <button type="button" class="btn ms-auto">Login</button>
</nav>

如果导航栏内有多个元素需要统一右对齐，你可以把这些元素放到同一个容器中，给外层容器加ms-auto即可：

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">站点Logo</a>
  <div class="ms-auto">
    <button type="button" class="btn me-2">登录</button>
    <button type="button" class="btn">注册</button>
  </div>
</nav>

适用Bootstrap 3的方案

如果使用的是旧版Bootstrap 3，给按钮添加navbar-right类即可实现右对齐：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <button type="button" class="btn navbar-right">Login</button>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Jade Merabela Fabiana