实现Bootstrap 4导航栏按钮在任意屏幕尺寸下始终可见且右对齐

这个场景我太熟悉了——之前用Bootstrap 4搭配MDB做导航栏时，也踩过单纯靠m*-auto搞不定跨端对齐的坑。核心问题在于：如果单独给按钮加对齐类，要么桌面端位置不对，要么移动端被折叠到汉堡菜单里。其实只需要调整一下导航栏的结构，利用Bootstrap的flex布局工具就能搞定，而且完全不用加两个按钮。

核心思路 #

把按钮和汉堡图标放在同一个flex容器里，通过ml-auto把这个容器固定在导航栏的最右侧。这样不管是桌面端（导航菜单展开）还是移动端（导航菜单折叠），按钮都会和汉堡图标保持相对位置，始终显示在它的右侧。

完整代码示例 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 品牌Logo -->
  <a class="navbar-brand" href="#">你的品牌</a>

  <!-- 关键容器：包裹按钮和汉堡图标，始终靠右 -->
  <div class="d-flex align-items-center ml-auto">
    <!-- 汉堡图标 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 始终可见的按钮 -->
    <button class="btn btn-primary ml-3">
      操作按钮
    </button>
  </div>

  <!-- 折叠的导航菜单 -->
  <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">功能</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于</a>
      </li>
    </ul>
  </div>
</nav>

代码说明 #

1. d-flex align-items-center：让容器内的按钮和汉堡图标垂直居中，和导航栏的高度匹配，避免错位。
2. ml-auto：给容器添加左外边距自动，会把整个容器推到导航栏的最右侧，确保按钮和汉堡始终在右上角区域。
3. 顺序调整：把汉堡图标放在按钮左边，就能实现按钮在汉堡“旁的右侧”的需求；如果想让按钮在汉堡左边，调换两者顺序即可。
4. 避免折叠：按钮没有放在navbar-collapse容器里，所以不会被折叠到汉堡菜单中，所有屏幕下都保持可见。

适配MDB注意事项 #

MDB的导航栏是基于Bootstrap扩展的，所以上面的Bootstrap基础类完全兼容。如果你的MDB导航栏用了自定义样式（比如深色主题），只需要替换navbar-light bg-light为对应的MDB类（比如navbar-dark bg-dark）即可，核心结构不用改。

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