Bootstrap 4中如何居中三个col-md-3列？偏移法无法实现

嘿，这个问题在Bootstrap 4里其实很好解决，毕竟它全面切换到了Flexbox布局，比Bootstrap 3灵活多了。给你两个可行的方案，按需选择：

方案1：用Bootstrap 4内置Flex工具类（推荐） #

Bootstrap 4的.row本身就是一个Flex容器，我们只需要给它加上justify-content-center类，就能让内部的列自动水平居中。三个.col-md-3加起来占9列，剩下的3列宽度会自动平均分配到左右两侧，正好对应你想要的1.5列偏移效果，完全不用手动计算偏移量。

代码示例：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<style>
.col-md-3 { 
  background-color: #e2e2e2; 
  margin: 5px 0; /* 加个上下margin，方便你更直观看到列的位置 */
}
</style>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-3">First column</div>
    <div class="col-md-3">Second column</div>
    <div class="col-md-3">Third column</div>
  </div>
</div>

这个方法是Bootstrap官方推荐的Flex布局用法，兼容性好，而且如果后续调整列的数量或宽度，居中效果会自动适配，非常灵活。

方案2：自定义1.5列偏移（精确控制场景） #

如果你一定要手动设置左侧1.5列的偏移，可以自定义一个CSS类。Bootstrap 4的列宽是按100%/12的百分比计算的，1.5列对应的百分比就是(1.5/12)*100% = 12.5%，直接给第一个列加这个自定义偏移类就行。

代码示例：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<style>
.col-md-3 { 
  background-color: #e2e2e2; 
  margin: 5px 0;
}
/* 自定义1.5列偏移类 */
.offset-md-1-5 {
  margin-left: 12.5%;
}
</style>
<div class="container">
  <div class="row">
    <div class="col-md-3 offset-md-1-5">First column</div>
    <div class="col-md-3">Second column</div>
    <div class="col-md-3">Third column</div>
  </div>
</div>

这个方法适合需要精确控制左侧偏移量的场景，但不如方案1灵活——如果后续修改列的数量或宽度，你得重新计算偏移百分比。

补充一句：之前Bootstrap 3的偏移方法（比如col-md-offset-*）之所以没用，是因为它基于浮动布局，只支持整数偏移；而Bootstrap 4改用Flexbox后，提供了更灵活的对齐工具，完全不需要依赖整数偏移类了。

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