Bootstrap 4 移动端navbar搜索输入框宽度扩展问题

你遇到的两个问题都是Bootstrap导航栏的默认样式限制导致的，按下面步骤调整即可：

• 解决搜索框w-100不生效问题
  Bootstrap默认给.navbar .form-control设置了max-width: 200px的规则，优先级高于width属性，所以单独加w-100不会生效。你可以给搜索框同时加w-100和mw-100（Bootstrap内置的max-width:100%类），或者手动加自定义CSS：

.navbar .form-control {
  max-width: 100%;
}

• 消除输入框和切换按钮的间隙
  首先确认两个元素的外层flex容器是否设置了间距，如果是，给容器加gap-0类；然后分别给两个元素去掉边距：给搜索框加me-0（取消右外边距），给navbar-toggler加ms-0（取消左外边距）。如果是代码换行导致的行内元素空格间隙，可以把两个元素的代码写在同一行，或者给父容器加font-size: 0后再单独给子元素恢复字体大小。

补充完整的导航栏代码示例参考：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 搜索框和切换按钮放在同一个弹性容器内 -->
  <div class="d-flex flex-grow-1">
    <input class="form-control me-0 w-100 mw-100" type="search" placeholder="搜索" aria-label="搜索">
    <button class="navbar-toggler ms-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">          
    <ul class="navbar-nav ml-auto">             
      <li class="nav-item"><a href="/join" class="nav-link">Join</a></li>
      <li class="nav-item"><a href="/login" class="nav-link">Sign In</a></li>             
    </ul>
  </div>
</nav>

上面的代码里用flex-grow-1让搜索框容器占满剩余宽度，配合w-100和mw-100实现搜索框自适应宽度，同时去掉了两个元素的相邻边距消除间隙。

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