Bootstrap实现input group与相邻按钮在同一行排列的问题求助

问题原因 #

你当前代码中的.input-group默认是块级元素，会占满所在父级col容器的100%宽度，因此后续的按钮会自动被挤到新行。

解决方法 #

借助Bootstrap内置的flex布局工具类即可实现同一行排列：

• 给包裹input-group和外部按钮的父容器添加d-flex类开启flex布局
• 搭配align-items-center实现元素垂直居中对齐
• 可添加gap-*类控制元素之间的间距，给input-group添加flex-1让它自动填充剩余可用宽度，避免按钮被挤压

修改后完整代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-dark">
  <div class="row">
    <div class="col">
      <!-- 额外添加text-white解决深色背景下文字看不清的问题，不需要可删除 -->
      <a class="navbar-brand text-white" href="#">Brand</a>
    </div>
    <!-- 给当前col添加flex相关工具类 -->
    <div class="col d-flex align-items-center gap-2">
      <div class="input-group flex-nowrap flex-1">
        <button class="btn btn-primary btn-lg" id="previous"> - </button>
        <input type="text" class="form-control text-center" id="pageNumber" value="1">
        <button class="btn btn-primary btn-lg" id="next"> + </button>
      </div>
      <button class="btn btn-primary btn-lg" id="zoomIn">x</button>
      <!-- 后续新增的按钮直接放在此处就会自动在同一行排列 -->
    </div>
  </div>
</div>

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