Bootstrap中如何实现Div元素的垂直对齐（非表格方式）

你当前的实现问题在于左侧标签区域宽度不固定，导致不同行的输入框和按钮起始位置错位。下面提供两种无需表格的解决方案，基于你使用的Bootstrap框架：

方案一：利用Bootstrap网格系统（推荐） #

通过网格将每行拆分为标签列和输入控制列，让标签列宽度统一，自然实现对齐：

<div class="card-body">
  <div class="form-group">
    <!-- 第一行 -->
    <div class="row align-items-center mb-3">
      <div class="col-md-3">
        <i class="nav-icon fas fa-hard-hat"></i> Montador
      </div>
      <div class="col-md-9">
        <div class="input-group">
          <span class="input-group-prepend">
            <button class="btn btn-info btn-danger"><i class="fas fa-minus"></i></button>
          </span>
          <input class="form-control input-number" pattern="[0-9]*" maxlength="4" type="number" value="0">
          <span class="input-group-prepend">
            <button class="btn btn-info btn-flat"><i class="fas fa-plus"></i></button>
          </span>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="row align-items-center mb-3">
      <div class="col-md-3">
        <i class="nav-icon fas fa-book"></i> Meio-Oficial
      </div>
      <div class="col-md-9">
        <div class="input-group">
          <span class="input-group-prepend">
            <button class="btn btn-info btn-danger"><i class="fas fa-minus"></i></button>
          </span>
          <input class="form-control input-number" pattern="[0-9]*" maxlength="4" type="number" value="0">
          <span class="input-group-prepend">
            <button class="btn btn-info btn-flat"><i class="fas fa-plus"></i></button>
          </span>
        </div>
      </div>
    </div>
    <!-- 更多行按此结构复制 -->
  </div>
</div>

说明： #

• row和col-md-3/col-md-9将每行分成固定比例的两列，标签列宽度一致
• align-items-center确保标签和输入区域垂直居中对齐
• 响应式友好，在小屏幕上会自动堆叠成垂直布局

方案二：自定义固定宽度标签容器 #

如果不想改动整体结构，给左侧标签容器设置固定宽度即可：

首先添加自定义CSS：

.label-prepend {
  min-width: 160px; /* 根据你的实际内容调整宽度 */
  display: flex;
  align-items: center;
  padding-right: 12px;
}

然后修改HTML：

<div class="card-body">
  <div class="form-group">
    <div class="input-group mb-3">
      <span class="input-group-prepend label-prepend">
        <i class="nav-icon fas fa-hard-hat"></i> Montador
      </span>
      <span class="input-group-prepend"><button class="btn btn-info btn-danger"><i class="fas fa-minus"></i></button></span>
      <input class="form-control input-number" pattern="[0-9]*" maxlength="4" type="number" value="0">
      <span class="input-group-prepend"><button class="btn btn-info btn-flat"><i class="fas fa-plus"></i></button></span>
    </div>
    <div class="input-group mb-3">
      <span class="input-group-prepend label-prepend">
        <i class="nav-icon fas fa-book"></i> Meio-Oficial
      </span>
      <span class="input-group-prepend"><button class="btn btn-info btn-danger"><i class="fas fa-minus"></i></button></span>
      <input class="form-control input-number" pattern="[0-9]*" maxlength="4" type="number" value="0">
      <span class="input-group-prepend"><button class="btn btn-info btn-flat"><i class="fas fa-plus"></i></button></span>
    </div>
    ...
  </div>
</div>

说明： #

• min-width保证所有标签区域宽度统一，避免内容长短影响布局
• display:flex和align-items:center确保图标与文字垂直居中

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