如何修改BS4中card group卡片组换行堆叠的触发断点

基于Bootstrap框架的实现方式 #

Bootstrap默认.card-group的堆叠触发断点为sm，修改为md断点可直接使用框架提供的响应式类：

• 替换原有的.card-group类为.card-group-md，该类会自动在md及以上宽度保持卡片横向排布，md宽度以下转为垂直堆叠，无需额外修改样式。
• 如果你需要全局修改所有卡片组的堆叠断点，可以重写SASS变量后编译：

  $card-group-breakpoint: md !default;
  

自定义CSS实现的修改方式 #

找到原来控制卡片组堆叠的媒体查询规则，将断点阈值从sm的576px改为md的992px即可：

/* 原有sm断点规则，可注释或删除
@media (max-width: 575.98px) {
  .card-group {
    flex-direction: column;
  }
} */

/* 替换为md断点规则 */
@media (max-width: 991.98px) {
  .card-group {
    flex-direction: column;
    /* 可同步添加堆叠后的间距、边框等样式调整 */
    gap: 1rem;
  }
}

注意：不同设计系统的md断点阈值可能存在细微差异，可根据自身项目的断点定义调整媒体查询的最大值即可。 #

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