Bootstrap4如何实现仅首行justify-content居中其余行左对齐

Bootstrap 4 没有内置类可以直接实现这个效果，也不用写复杂的JS去判断元素个数，只要修正栅格结构，加几行自定义CSS就能搞定。

先纠正你代码里的错误 #

你现在把col-xl-3/col-lg-4这类列类加在.row上是完全错误的，栅格的列类必须放在.row的直接子元素上，不然宽度计算全乱。另外你加的justify-content-center会让所有换行后的行都居中，自然满足不了“换行后非首行左对齐”的要求。

实现方法 #

核心逻辑很简单：

• 用justify-content-center保证元素凑不满一行的时候整体居中
• 给行容器加几个和当前断点列宽一致的隐形占位元素，这些占位元素高度为0，不会占垂直空间，但是会参与flex宽度计算，自动把多出来的占位元素挤到下一行，逼着换行后的真实元素自动靠左，全程不用JS干预。

先写自定义CSS：

/* 你原来的列样式，改个类名避免和Bootstrap原生col-3冲突 */
.col-item {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

/* 动态列行容器 */
.dynamic-col-row {
  position: relative;
}

/* 占位元素通用样式，不可见、不触发交互 */
.dynamic-col-row::before,
.dynamic-col-row::after,
.dynamic-col-row .placeholder {
  content: "";
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 按断点匹配占位元素宽度，和你的列宽一一对应 */
/* sm断点列宽100%，1行只能放1个，不需要占位 */
@media (min-width: 768px) {
  /* md断点col-md-6宽50%，1行最多2个，1个占位就够 */
  .dynamic-col-row::before {
    width: 50%;
  }
}
@media (min-width: 992px) {
  /* lg断点col-lg-4宽33.333%，1行最多3个，需要2个占位 */
  .dynamic-col-row::before {
    width: 33.3333%;
  }
  .dynamic-col-row::after {
    width: 33.3333%;
  }
}
@media (min-width: 1200px) {
  /* xl断点col-xl-3宽25%，1行最多4个，需要3个占位 */
  .dynamic-col-row::before,
  .dynamic-col-row::after,
  .dynamic-col-row .placeholder {
    width: 25%;
  }
}

然后修正后的HTML结构：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <!-- 行容器不要加col类，只保留row、居中类和自定义类 -->
  <div class="row justify-content-center dynamic-col-row">
    <!-- 所有响应式列类都加在子元素上 -->
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-item">1</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-item">2</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-item">3</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-item">4</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-item">5</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-item">6</div>
    <!-- 第三个占位元素，伪元素只能生成2个，所以补一个空div -->
    <div class="placeholder"></div>
  </div>
</div>

效果说明 #

• 不管在哪个响应式断点下，只要元素总数没到单行最大容量，整行元素会自动居中
• 元素多到换行时，第二行及之后的元素会自动靠左对齐，不会出现居中错位
• 动态增删列元素的时候不需要额外写JS逻辑，自动适配。

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