Bootstrap 4 如何设置每行显示5张卡片？原配置每行4张

解决方法 #

因为Bootstrap 4的栅格是12列系统，你原来用col-lg-3（12÷3=4）所以每行4张，要改成每行5张，有两种简单方式：

方式1：用Bootstrap内置flex布局（无需额外CSS）

直接把卡片外层的列类从col-12 col-lg-3改成col-12 col-lg。

修改后的代码：

<div class="container">
  <div class="row">
    <div class="col-12 col-lg">              
      <div class="card mb-3 cardtrans">
        <!-- 卡片内容 -->
      </div>
    </div>
    <!-- PHP循环渲染其他卡片 -->
  </div>
</div>

原理：Bootstrap 4的row默认是flex容器，不带数字的col-lg会自动平分容器宽度，5个这样的列就会各占1/5的宽度，刚好每行5张。小屏幕下col-12依然保持每行1张。

方式2：自定义列类（精确控制宽度）

如果需要更明确的宽度控制，可以自定义一个CSS类，针对lg及以上屏幕设置每列占20%宽度：

@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

然后把列类改成col-12 col-lg-2-4：

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-2-4">              
      <div class="card mb-3 cardtrans">
        <!-- 卡片内容 -->
      </div>
    </div>
    <!-- PHP循环渲染其他卡片 -->
  </div>
</div>

两种方法都能实现每行5张卡片的需求，选哪种看你对布局控制的具体要求。

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