Bootstrap 4导航栏小屏幕表单元素错位，如何整合为整体块？

嘿，我懂你的困扰！在Bootstrap 4里，form-inline类在屏幕宽度小于576px时，会自动把内部元素切换为块级布局，所以你的搜索输入组和分页按钮就被迫换行分开了。要让它们始终作为一个整体保持在同一行，我们可以利用Bootstrap的flex工具类来调整布局，具体方案如下：

解决方案步骤 #

1. 给表单元素添加flex布局类，强制内部元素保持行内排列
2. 让搜索输入组占据可用空间，按钮固定在旁
3. 确保元素垂直居中，优化视觉对齐效果

修改后的完整代码 #

<header>
  <div class="container">
    <nav class="navbar navbar-light bg-light justify-content-between">
      <a class="navbar-brand">Brand</a>
      <!-- 给form添加flex相关类，替代默认的form-inline小屏幕行为 -->
      <form class="form-inline d-flex align-items-center flex-nowrap">
        <!-- 输入组添加flex-grow-1占据剩余空间，mr-2添加右侧间距 -->
        <div class="input-group flex-grow-1 mr-2">
          <input class="form-control" type="text" placeholder="Search" aria-label="Search" aria-describedby="SearchButton" id="Search">
          <div class="input-group-append">
            <span class="input-group-text" id="SearchButton"><i class="fa fa-search"></i></span>
          </div>
        </div>
        <button id="PagePrev" class="btn btn-success"><i class="fa fa-angle-left"></i></button>
        <button id="PageNext" class="btn btn-success ml-1"><i class="fa fa-angle-right"></i></button>
      </form>
    </nav>
  </div>
</header>

代码细节解释 #

• d-flex：将表单转换为flex容器，直接替代form-inline在小屏幕下的块级布局逻辑
• align-items-center：让表单内的输入组和按钮垂直居中，保持视觉上的整齐
• flex-nowrap：强制flex容器内的元素永不换行，确保输入框和按钮始终绑定在一起
• flex-grow-1：让输入组占据表单内的所有剩余空间，避免按钮挤压输入框的宽度
• mr-2/ml-1：添加元素间的间距，避免界面显得过于拥挤

如果担心极小屏幕下输入框被压缩得太窄，还可以添加一段自定义CSS设置最小宽度：

@media (max-width: 575px) {
  .input-group.flex-grow-1 {
    min-width: 200px;
  }
}

这样修改后，不管屏幕尺寸如何变化，搜索框和分页按钮都会作为一个整体保持在同一行啦！

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