Bootstrap 4实现CSS Inline-Grid等效的动态3列自动换行布局

这事儿在Bootstrap 4里其实特别简单，完全不用手动拆分行，靠它原生的flex网格系统就能轻松实现你要的效果——保持3列布局、自动换行，还自带响应式特性。我给你拆解一下具体实现方式：

核心思路 #

Bootstrap 4的.row是基于Flexbox的容器，默认自带flex-wrap: wrap属性，这意味着当里面的列总宽度超过容器时，会自动换行。而我们只需要给每个列表项设置固定占比的列宽，就能实现每行3个项的布局。

基础实现（全屏幕尺寸保持3列） #

如果希望在手机、平板、桌面所有设备上都显示3列布局，直接用.col-4类即可——Bootstrap的栅格系统是12份，col-4表示每个列占12中的4份，刚好3列填满一行。

代码示例：

<!-- 可选的容器，用来控制布局宽度和边距 -->
<div class="container my-4">
  <!-- 单个row容器，所有列表项都放这里 -->
  <div class="row">
    <!-- 列表项1 -->
    <div class="col-4 mb-3">
      <div class="card p-3">
        列表项内容1
      </div>
    </div>
    <!-- 列表项2 -->
    <div class="col-4 mb-3">
      <div class="card p-3">
        列表项内容2
      </div>
    </div>
    <!-- 列表项3 -->
    <div class="col-4 mb-3">
      <div class="card p-3">
        列表项内容3
      </div>
    </div>
    <!-- 列表项4 -->
    <div class="col-4 mb-3">
      <div class="card p-3">
        列表项内容4
      </div>
    </div>
    <!-- 可以继续添加任意数量的列表项 -->
    <div class="col-4 mb-3">
      <div class="card p-3">
        列表项内容5
      </div>
    </div>
    <div class="col-4 mb-3">
      <div class="card p-3">
        列表项内容6
      </div>
    </div>
  </div>
</div>

响应式调整（小屏幕堆叠，大屏保持3列） #

如果想要更友好的移动端体验——比如手机屏幕上显示1列，平板及以上屏幕显示3列，只需要把.col-4换成.col-12 col-md-4：

• .col-12：在最小屏幕（<576px）下占满整行，即1列
• .col-md-4：在中等屏幕（≥768px）及以上占4份，即3列

代码示例中的列表项类修改为：

<div class="col-12 col-md-4 mb-3">
  <!-- 内容 -->
</div>

优化细节 #

• 间距处理：添加mb-3类给每个列表项设置底部外边距，避免垂直方向挨得太近；Bootstrap的.row默认带有负margin，.col自带左右padding，已经帮你处理好了水平间距，不用额外设置。
• 对齐方式：默认情况下最后一行的项会左对齐，如果想要居中或右对齐，给.row添加对应的类即可：
  • 居中：.row justify-content-center
  • 右对齐：.row justify-content-end

这样不管你有4个、11个还是任意数量的列表项，都会自动按3列布局换行，完全不用手动拆分多个.row，完美符合你的需求！

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