Bootstrap导航栏布局咨询：左Logo、中输入框、右侧元素实现

嘿，这事儿超简单！Bootstrap的导航栏组件配合它的弹性布局工具，完全能轻松实现你想要的结构。我直接给你一个完整的可运行示例，再拆解下关键部分，你照着改就行~

完整代码（Bootstrap 5版本） #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- 左侧Logo -->
    <a class="navbar-brand" href="#">
      <!-- 替换成你的Logo图片 -->
      <img src="your-logo.png" alt="品牌Logo" width="30" height="30" class="d-inline-block align-text-top">
      你的品牌名
    </a>

    <!-- 中间的文本输入框 -->
    <div class="d-flex mx-auto flex-grow-1 max-w-md">
      <input class="form-control me-2" type="search" placeholder="请输入关键词..." aria-label="搜索">
      <button class="btn btn-outline-success" type="submit">搜索</button>
    </div>

    <!-- 右侧的内容元素 -->
    <div class="d-flex align-items-center">
      <ul class="navbar-nav me-3">
        <li class="nav-item">
          <a class="nav-link" href="#">我的账户</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">购物车</a>
        </li>
      </ul>
      <button class="btn btn-primary" type="button">登录</button>
    </div>
  </div>
</nav>

关键部分拆解 #

• 左侧Logo：用navbar-brand组件承载，你可以替换成自己的图片+文字，调整图片宽高就能适配导航栏高度，纯文字Logo也直接写在a标签里就行。
• 中间输入框：
  • mx-auto 让这个区块在导航栏中水平居中
  • flex-grow-1 让输入框容器尽可能占据可用空间，避免在宽屏上太窄
  • max-w-md 是可选设置，用来限制输入框的最大宽度，防止在超大屏幕上拉得太宽
• 右侧元素：用d-flex align-items-center让里面的内容垂直居中，navbar-nav放导航链接，按钮或者其他自定义元素都可以直接加在这里，完全按需替换。
• 响应式适配：navbar-expand-lg表示屏幕宽度≥992px时展开导航栏，小屏幕下会自动折叠成汉堡菜单；如果想在更小屏幕也保持展开，换成navbar-expand-md或者navbar-expand就行。

要是你用的是Bootstrap 4版本，只需要把Bootstrap 5里的ms-auto（margin start）换成ml-auto（margin left），其他逻辑基本一致~

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