如何将导航栏（Navbar）中的按钮移至左侧？

阿华AIGC实验室

2026-5-25

解决导航栏按钮居左的问题

看起来你是想用Bootstrap导航栏把按钮放在最左侧对吧？问题主要出在这两点：

Bootstrap的navbar是flex容器，float-left这类浮动属性在flex布局里完全不生效，加了也起不到作用
当前你的HTML元素顺序是navbar-brand在前、按钮在后，而flex布局默认是从左到右排列元素，所以按钮自然会出现在品牌名称的右边

给你两个简单直接的解决办法：

方法一：调整HTML元素顺序（最直观）

直接把按钮代码移到navbar-brand标签前面，flex布局会自动按元素顺序从左到右排列，同时可以去掉没用的float-left类：

<body>
  <nav class="navbar navbar-dark fixed-top bg-info flex-md-nowrap p-0">
    <!-- 按钮移到品牌名称前面 -->
    <button class="btn btn-primary btn-sm">
      <span data-feather="toggle-left"></span>
    </button>
    <a class="navbar-brand col-md-2 mr-0" href="#">Web name</a>
    <span class="text-nowrap" style="color:white; margin-right:20px;">
      <span data-feather="user"></span>...
    </span>
  </nav>
</body>

方法二：用Bootstrap的order类（不改动元素顺序）

如果不想调整HTML结构，可以用Bootstrap的order-*类改变flex子元素的排列优先级。默认所有子元素的order值是0，给品牌名称标签加order-1，按钮保持默认的order-0，这样按钮就会排在品牌名称前面：

<body>
  <nav class="navbar navbar-dark fixed-top bg-info flex-md-nowrap p-0">
    <a class="navbar-brand col-md-2 mr-0 order-1" href="#">Web name</a>
    <button class="btn btn-primary btn-sm">
      <span data-feather="toggle-left"></span>
    </button>
    <span class="text-nowrap" style="color:white; margin-right:20px;">
      <span data-feather="user"></span>...
    </span>
  </nav>
</body>

另外提一句：如果你的导航栏需要适配小屏幕，可能还要调整flex-md-nowrap这类响应式类，但针对当前按钮居左的需求，上面两种方法都能完美解决~

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