Bootstrap导航栏布局求助：float-left/right类无法实现左右分布

嘿，刚接触Bootstrap很容易踩这个坑！你用float-left和float-right没效果，是因为Bootstrap的导航栏（.navbar）默认是flex布局，float类在flex容器的子元素里不会生效，得用Bootstrap专门的flex对齐工具类来实现你的需求。

正确的实现思路 #

把导航栏内容分成两组：左侧组（两个导航项+输入框）和右侧组（两个导航项），用flex工具类控制它们的对齐方式：

• 用d-flex把每组变成flex容器，配合align-items-center保证内容和导航栏垂直居中
• 用ms-auto（Bootstrap 5）或ml-auto（Bootstrap 4）把右侧组推到导航栏最右侧

修改后的完整代码片段 #

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="index.php">Logo</a>
    
    <!-- 左侧内容组：两个导航项 + 输入框 -->
    <div class="d-flex align-items-center me-3">
      <ul class="navbar-nav me-3">
        <li class="nav-item">
          <a class="nav-link" href="#">导航项1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">导航项2</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
      </form>
    </div>
    
    <!-- 右侧内容组：两个导航项 -->
    <div class="ms-auto d-flex align-items-center">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">导航项3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">导航项4</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键细节说明 #

1. 移除重复的fixed-top：你的原代码里写了两次fixed-top，保留一次就够了
2. 间距控制：用me-3（margin-end）给元素之间添加合适的间距，避免内容挤在一起
3. 版本兼容：如果用的是Bootstrap 4，把ms-auto改成ml-auto，me-*改成mr-*就行
4. 折叠适配：.navbar-expand-lg在大屏幕下会展开导航栏，小屏幕会自动折叠（如果需要小屏幕的展开/折叠逻辑，记得补充navbar-toggler按钮）

这样调整后，就能完美实现你想要的左侧两个导航项+输入框、右侧两个导航项的布局啦！

内容的提问来源于stack exchange，提问作者ShlongMór