Bootstrap4如何实现三列对齐的列表表单布局

云上老周

2026-9-3

问题说明

我正尝试实现指定的三列拖拽列表布局效果，当前使用Bootstrap 4框架开发，尝试过用row、col栅格类搭建布局但始终无法还原目标样式。目前采用<ul>和<li>标签构建列表结构，每个<li>内部放置3个输入框，试过把三个输入框统一放入<div class="form-group form-inline">容器，也试过把每个输入框单独包裹在独立的form-group div内，都没实现预期效果。

当前能实现的最接近目标效果的代码存在宽度设置不正确、元素自动换行的问题：

<div id="cardBody" class="card-body">
  <div class="row">
    <div class="container-fluid">
      <div class="col-md-6">
        <label class="control-label ml-2">Description</label>
      </div>
      <div class="col-md-4">
        <label class="control-label">Link</label>
      </div>
      <div class="col-md-1">
        <label class="control-label">Count</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <form>
        <ul id="itemList" class="list-group">
          <li class="list-group-item">
            <div class="form-group form-inline mb-0">
              <label for="description">&#8942;&#8942;</label>
              <input type="text" class="form-control ml-2 mr-2" id="description" placeholder="">

              <label class="sr-only" for="link">Link</label>
              <input type="text" class="form-control mr-2" id="link" placeholder="">

              <label class="sr-only" for="count">Count</label>
              <input type="text" class="form-control mr-2" id="count" placeholder="">
            </div>
          </li>
          <li class="list-group-item">
            <div class="form-group form-inline mb-0">
              <label for="description2">&#8942;&#8942;</label>
              <input type="text" class="form-control ml-2 mr-2" id="description2" placeholder="">

              <label class="sr-only" for="link2">Link</label>
              <input type="text" class="form-control mr-2" id="link2" placeholder="">

              <label class="sr-only" for="count2">Count</label>
              <input type="text" class="form-control mr-2" id="count2" placeholder="">
            </div>
          </li>
          <li class="list-group-item">&#8942;&#8942;</li>
          <li class="list-group-item">4</li>
          <li class="list-group-item">5</li>
          <li class="list-group-item">6</li>
        </ul>
      </form>
    </div>
  </div>
</div>

解决方案

代码出问题的核心原因有两点：

栅格嵌套逻辑不符合Bootstrap 4规则：.col-*必须是.row的直接子元素，你在row内部套了container-fluid再放col，栅格宽度计算逻辑完全失效，才会出现宽度错乱。
form-inline不适合这类需要严格列对齐的布局：form-inline是弹性自适应布局，会根据内容自动换行，没法和表头的列宽做精准对齐。

修正逻辑：

删掉冗余的container-fluid嵌套，表头和每一个列表项都用完全一致的栅格列划分，从结构上保证上下对齐
左侧的拖拽图标单独占1列宽度，剩下的11列按6:4:1的比例分配给Description、Link、Count三个输入框，和表头列宽完全匹配
给输入框添加w-100类，让输入框自动撑满所在列的宽度，不会因为默认尺寸被挤压换行。

修正后完整代码：

<div id="cardBody" class="card-body">
  <!-- 表头区域 -->
  <div class="row px-3">
    <div class="col-1"></div> <!-- 占住拖拽手柄的列宽，保证对齐 -->
    <div class="col-6">
      <label class="control-label">Description</label>
    </div>
    <div class="col-4">
      <label class="control-label">Link</label>
    </div>
    <div class="col-1">
      <label class="control-label">Count</label>
    </div>
  </div>

  <form>
    <ul id="itemList" class="list-group mt-2">
      <!-- 列表项和表头用完全一致的栅格划分 -->
      <li class="list-group-item">
        <div class="row align-items-center">
          <div class="col-1 text-center">
            <label for="description" class="mb-0">&#8942;&#8942;</label>
          </div>
          <div class="col-6">
            <input type="text" class="form-control" id="description" placeholder="">
          </div>
          <div class="col-4">
            <label class="sr-only" for="link">Link</label>
            <input type="text" class="form-control" id="link" placeholder="">
          </div>
          <div class="col-1">
            <label class="sr-only" for="count">Count</label>
            <input type="text" class="form-control" id="count" placeholder="">
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <div class="row align-items-center">
          <div class="col-1 text-center">
            <label for="description2" class="mb-0">&#8942;&#8942;</label>
          </div>
          <div class="col-6">
            <input type="text" class="form-control" id="description2" placeholder="">
          </div>
          <div class="col-4">
            <label class="sr-only" for="link2">Link</label>
            <input type="text" class="form-control" id="link2" placeholder="">
          </div>
          <div class="col-1">
            <label class="sr-only" for="count2">Count</label>
            <input type="text" class="form-control" id="count2" placeholder="">
          </div>
        </div>
      </li>
      <!-- 其余列表项按照相同结构添加即可 -->
      <li class="list-group-item">&#8942;&#8942;</li>
      <li class="list-group-item">4</li>
      <li class="list-group-item">5</li>
      <li class="list-group-item">6</li>
    </ul>
  </form>
</div>

实现效果说明：

表头和所有输入框列严格对齐，不会出现自动换行问题
输入框自动撑满列宽，间距符合Bootstrap默认设计规范
如果需要在移动端也保持横向排列，保留col-*类即可；如果需要移动端堆叠，把col-*换成col-md-*就会在小于md尺寸的屏幕下自动纵向堆叠。

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