Bootstrap表格垂直对齐及col-lg列宽匹配异常问题咨询

哈哈，这个坑我之前帮好几个朋友踩过！你这里其实是栽在了Bootstrap栅格系统的两个容易忽略的细节上：

1. 对栅格列的“宽度比例”理解有误 #

Bootstrap的栅格是基于12列布局设计的：

• 占满容器全宽的列是col-lg-12，而不是col-lg-10
• 你想要的“半宽”应该对应col-lg-6（6是12的一半），而不是col-lg-5

你误以为col-lg-10和col-lg-5是1:0.5的比例，但实际上它们对应的是10/12和5/12的容器宽度占比——看起来数值是两倍，但结合栅格的规则，这并不是你需要的“完整宽度+半宽”组合。

2. 列的固定内边距打破了精确比例 #

就算你坚持用col-lg-10和col-lg-5，每个栅格列默认都带有padding-left: 15px和padding-right: 15px的固定内边距。假设容器宽度为W：

• col-lg-10的实际可用宽度是 (W * 10/12) - 30px
• col-lg-5的实际可用宽度是 (W *5/12) -30px

显然后者不是前者的一半，因为减去的30px是固定值，不是按比例分配的，这就导致了视觉上的细微差异。

快速解决方法 #

方案一：用正确的栅格列组合（推荐） #

如果你要的是“完整宽度表格 + 半宽表格”的精确对齐，直接把两个div的类改成：

• 完整宽度表格的容器：col-lg-12
• 半宽表格的容器：col-lg-6

如果需要消除内边距的影响，可以给列加上px-0类（Bootstrap 4及以上版本），这样左右内边距会被清零，宽度比例会完全精确匹配。

方案二：保留原列数但消除内边距影响 #

如果你因为布局限制必须用col-lg-10和col-lg-5，可以给包含列的row加上no-gutters类，这个类会移除列之间的间距，同时清零列的左右内边距，让宽度比例回归精确的1:0.5。示例代码：

<div class="row no-gutters">
  <div class="col-lg-10">
    <!-- 你的完整宽度表格 -->
  </div>
</div>
<div class="row no-gutters">
  <div class="col-lg-5">
    <!-- 你的半宽表格 -->
  </div>
</div>

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