如何在Bootstrap 5导航栏中居中放置搜索表单并拓展宽度

问题原因 #

你之前设置的text-align: center仅对行内内容生效，而Bootstrap5的导航栏折叠容器默认是flex布局，子元素的对齐规则由flex属性控制，因此该样式不生效。

解决方法 #

直接使用Bootstrap5自带的工具类即可实现需求，无需复杂自定义CSS，修改以下两处即可：

1. 给搜索表单添加mx-auto类实现flex布局下的水平居中，同时添加宽度控制类调整表单宽度
2. 给搜索输入框添加flex-grow-1类，让输入框自动填充表单剩余空间，拓展输入区域宽度

修改后的核心代码示例

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <!-- 搜索表单新增mx-auto、w-100，可自定义max-width限制最大宽度 -->
  <form class="d-flex mx-auto w-100" id="search">
    <!-- 输入框新增flex-grow-1自动填充宽度 -->
    <input class="form-control me-2 flex-grow-1" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Cart</a>
      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider" /></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>

添加以下自定义CSS控制表单最大宽度，避免大屏下表单过宽：

#search {
  max-width: 500px;
}

代码说明 #

• mx-auto：flex布局下给子元素设置左右margin为auto，自动实现水平居中
• w-100：让表单在小屏设备下占满可用宽度，适配移动端显示
• flex-grow-1：输入框会自动占满表单内除搜索按钮外的所有剩余空间，最大化输入区域
• 右侧导航的ms-auto类保留，确保购物车下拉菜单始终靠右对齐

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