Bootstrap导航栏搜索框移动端输入框与按钮无法并排显示求助

我来帮你搞定这个移动端搜索框和按钮不能并排显示的问题～

问题原因 #

Bootstrap的form-inline类在屏幕宽度小于768px（移动端断点）时，会自动将内部元素转为块级元素，导致输入框和按钮上下堆叠，这是它默认的响应式行为。

解决方案（推荐用Bootstrap内置工具类，无需额外CSS） #

你可以修改搜索表单的代码，利用Bootstrap的弹性布局工具类强制保持元素在一行：

修改后的搜索表单代码：

<div class="form-group">
  <form role="search" method="get" class="form-inline d-flex flex-nowrap" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <!-- 输入框容器，占满剩余空间 -->
    <div class="flex-grow-1 mr-2">
      <input type="search" class="form-control form-control-sm w-100" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
    </div>
    <!-- 搜索按钮 -->
    <input type="submit" class="btn btn-default" value="Search">
  </form>
</div>

代码说明：

• d-flex：将表单转为弹性布局容器
• flex-nowrap：强制元素不换行，始终保持在一行
• flex-grow-1：让输入框的容器占满表单的剩余空间，保证按钮只占自身宽度
• mr-2：给按钮左侧添加一点间距，避免和输入框挤在一起
• w-100：确保输入框在父容器中宽度100%，充分利用空间

备选方案：使用网格系统 #

如果你更习惯用Bootstrap的网格布局，也可以这样写：

<div class="form-group">
  <form role="search" method="get" class="row g-2" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div class="col-auto flex-grow-1">
      <input type="search" class="form-control form-control-sm w-100" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
    </div>
    <div class="col-auto">
      <input type="submit" class="btn btn-default" value="Search">
    </div>
  </form>
</div>

这个方案用row和col-auto创建自适应列，flex-grow-1同样让输入框列占满剩余空间，g-2控制列之间的间距。

额外提示 #

另外可以检查下导航栏的结构，你当前的<div class="navbar navbar-right">可以调整为<div class="pull-right">（Bootstrap 3环境下），不过这不是导致搜索框堆叠的核心问题，主要还是表单内部的布局逻辑需要调整。

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