Bootstrap 4：动态数量、固定边距的居中列实现方案咨询

嘿，这个场景我太熟悉了！Bootstrap 4默认的栅格系统是按百分比均分宽度的，所以当列数从5变到4时，每列会自动拉伸到25%宽度，自然没法保持固定尺寸还居中对齐。咱们来用两种简单的方法解决这个问题：

方法一：自定义Flex布局类（推荐） #

利用Bootstrap 4本身基于Flexbox的特性，自定义一个行类来控制居中固定列：

首先添加自定义CSS：

/* 自定义行样式：居中、自动换行、固定间距 */
.row-fixed-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* 列之间的固定边距，可按需调整 */
}

/* 固定尺寸的列 */
.row-fixed-cols .col-fixed {
  flex: 0 0 auto; /* 禁止列伸缩，保持固定宽度 */
  width: 180px; /* 这里设置你需要的固定列宽 */
}

然后修改你的HTML结构：

<div class="container-fluid">
  <div class="row row-fixed-cols">
    <div class="col-fixed">1</div>
    <div class="col-fixed">2</div>
    <div class="col-fixed">3</div>
    <div class="col-fixed">4</div>
    <!-- 可以动态增减列，布局会自动适配居中 -->
  </div>
</div>

为什么这个方法管用？ #

• flex: 0 0 auto 确保列不会根据父容器宽度伸缩，牢牢固定你设置的宽度
• justify-content: center 让所有列在父容器的剩余空间里居中对齐
• gap 属性直接控制列之间的间距，比用margin更简洁，不会有额外的外边距问题

方法二：用Bootstrap内置Flex类简化代码 #

如果你不想写太多自定义CSS，可以直接用Bootstrap提供的Flex工具类，只需要给列加固定宽度：

HTML结构：

<div class="container-fluid">
  <div class="row d-flex flex-wrap justify-content-center">
    <div class="custom-col">1</div>
    <div class="custom-col">2</div>
    <div class="custom-col">3</div>
    <div class="custom-col">4</div>
  </div>
</div>

对应的少量CSS：

.custom-col {
  flex: 0 0 auto;
  width: 180px;
  margin: 0 0.5rem 1rem; /* 左右边距模拟间距，下边距处理换行后的间距 */
}

这个方法利用了Bootstrap的d-flex（启用Flex）、flex-wrap（自动换行）、justify-content-center（居中对齐）这些内置类，减少自定义代码量。

额外提示：响应式适配 #

如果需要在不同屏幕尺寸下调整列宽，加个媒体查询就行：

@media (max-width: 768px) {
  .col-fixed, .custom-col {
    width: 140px; /* 小屏幕下缩小列宽 */
  }
}

这样不管你动态添加或减少多少列，它们都会保持固定尺寸，并且始终在容器中居中对齐啦！

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