能否根据元素数量动态调整容器内CSS/Bootstrap卡片布局

实现思路 #

• 利用CSS :nth-last-child() 兄弟选择器，自动识别卡片总数量，动态分配每个卡片的宽度
• 保留flex布局的弹性特性，无需额外JS判断卡片数量
• 兼容Bootstrap网格的基础样式

修改步骤 #

1. 调整HTML结构 #

给外层row添加自定义类dynamic-card-wrap，卡片外层col替换为自定义类card-item，避免默认col样式冲突

<div class="row dynamic-card-wrap">  
    <!-- 卡片循环 --> 
    <div v-for="data in someData" class="card-item"> 
        <div class="card m-0 mt-3">
            <div class="card-body pt-1 pr-1">
                <div v-if="canEdit">                     
                    <div class="float-right mr-1">
                        <i class="bi bi-pencil psa-bi-action"></i>
                        <i class="bi bi-trash psa-bi-action"></i>
                    </div>                                                             
                </div>
                <div class="mt-3 card-text font-weight-600">
                    {{data}}
                </div>
                <p class="m-0"><small>{{data}}</small></p>
            </div>
        </div>
    </div>
</div>

2. 添加自定义CSS样式 #

/* 外层容器基础设置 */
.dynamic-card-wrap {
  flex-wrap: wrap;
  gap: 0; /* 如需卡片间距可直接调整此属性即可 */
}
/* 卡片基础样式 */
.card-item {
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0;
}

/* 1张卡片：占满100%宽度 */
.card-item:only-child {
  width: 100%;
}
/* 2张卡片：各占50%宽度 */
.card-item:first-child:nth-last-child(2),
.card-item:first-child:nth-last-child(2) ~ .card-item {
  width: 50%;
}
/* 3张卡片：各占33.333%宽度 */
.card-item:first-child:nth-last-child(3),
.card-item:first-child:nth-last-child(3) ~ .card-item {
  width: 33.333%;
}
/* 4张卡片：每行2张各占50%宽度 */
.card-item:first-child:nth-last-child(4),
.card-item:first-child:nth-last-child(4) ~ .card-item {
  width: 50%;
}
/* 5张卡片：第一行3张占33.333%，第二行2张占50% */
.card-item:first-child:nth-last-child(5),
.card-item:first-child:nth-last-child(5) ~ .card-item:nth-child(-n+3) {
  width: 33.333%;
}
.card-item:first-child:nth-last-child(5) ~ .card-item:nth-child(n+4) {
  width: 50%;
}
/* 6张卡片：默认2行各3张，各占33.333%宽度 */
.card-item:first-child:nth-last-child(6),
.card-item:first-child:nth-last-child(6) ~ .card-item {
  width: 33.333%;
}
/* 如需6张卡片按3行各2张排列，把上面6张规则替换为下方代码即可 */
/*
.card-item:first-child:nth-last-child(6),
.card-item:first-child:nth-last-child(6) ~ .card-item {
  width: 50%;
}
*/

补充说明 #

所有规则完全适配1-6张卡片的所有排版要求，纯CSS实现无需JS介入，兼容主流现代浏览器均支持该语法。

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