如何使用Bootstrap 5拉伸导航栏navbar中的搜索框searchbox

解决方法 #

问题根因：你当前的搜索表单外层没有设置填充剩余宽度的属性，仅给输入框设100%宽度无法生效，因为父容器form本身宽度没有被撑开。

你只需做两处小调整即可实现效果：

• 移除form标签的ms-auto me-auto类，新增flex-grow-1类，让表单自动占满导航栏中logo和右侧导航项之间的所有可用空间，可按需加mx-*类设置左右边距避免元素贴边
• 给搜索输入框新增flex-grow-1类，让输入框占满表单内除搜索按钮外的剩余宽度，你原有自定义的#searchbox {width:100%}也可以保留，两种方式都能生效

修改后的代码示例 #

HTML代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="images/logo.png" alt="Brand image" width="180" height="52">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <form class="d-flex flex-grow-1 mx-3">
        <input class="form-control flex-grow-1" id="searchbox" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success ms-2" type="submit">Search</button>
      </form>
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

可选CSS代码（如果不用flex-grow-1类可以保留这段）

#searchbox{
    width: 100%;
}

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