Bootstrap内联表单按钮在导航栏折叠时错位问题求助

嘿，我来帮你搞定这个小问题！在Bootstrap 4里，这种小屏幕下元素自动换行的情况很常见，咱们用框架自带的工具类就能轻松解决，不用写额外的CSS。

核心思路 #

问题出在手机尺寸下，搜索框和按钮默认没有被设置为弹性布局，会自动换行。咱们只需要把这两个元素放进一个弹性容器里，让它们在任何屏幕尺寸下都保持横向排列。

具体修改步骤 #

• 找到导航栏里的搜索输入框和提交按钮，用一个<div>把它们包裹起来
• 给这个包裹的<div>加上d-flex类（Bootstrap的弹性布局工具类，所有屏幕尺寸生效）
• 给输入框加个mr-2类（或者给容器加gap-2，Bootstrap 4.1+支持），调整元素间的间距，避免挤在一起

修改后的代码示例 #

原来的搜索部分可能是这样的：

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

修改后变成：

<div class="d-flex">
  <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</div>

完整的导航栏代码参考：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">你的品牌</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
    </ul>
    <!-- 修改后的搜索区域 -->
    <div class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="搜索" aria-label="搜索">
      <button class="btn btn-outline-success" type="submit">搜索</button>
    </div>
  </div>
</nav>

额外说明 #

• d-flex类会让容器内的元素默认横向排列，不管屏幕大小，所以手机端也不会换行
• 如果你的Bootstrap版本是4.1及以上，可以把mr-2换成给包裹div加gap-2，这样元素间的间距更统一：<div class="d-flex gap-2">
• 这个修改在导航栏折叠状态下（点击汉堡菜单后）也能生效，搜索框和按钮依然保持内联

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