如何让Div自动适配内部内容高度并维持3x3网格对齐

1. 修正网格结构（适配3x3布局） #

你的代码目前用col-6是两列布局，要实现3x3网格，应该改用col-4（Bootstrap 12栅格系统中，12/3=4），同时移除针对最后一项的特殊class判断，让Bootstrap自动处理每行对齐：

<div class="row g-2"> <!-- g-2 控制列间距，可按需调整 -->
  <template 
    v-for="(item, index) in this.items.slice(0, maxNumberOfItems)" 
    :key="index"
  >
    <div class="col-4"> <!-- 3列布局，每列占栅格系统的4份 -->
      <Button 
        @on-click="onButtonClick(item)"
        :text="item"
        class="btn-block h-auto" <!-- 按钮占满列宽，高度自适应 -->
      />
    </div>
  </template>
</div>

2. 关键样式调整 #

给按钮和列容器添加以下CSS，解决文本过长显示问题，同时保证网格高度对齐：

/* 让同一行的列容器高度统一，维持网格整齐 */
.row > .col-4 {
  display: flex;
  align-items: stretch;
}

/* 按钮文本自动换行，高度自适应内容，同时保持垂直水平居中 */
.btn-block.h-auto {
  white-space: normal; /* 允许文本换行 */
  min-height: auto; /* 移除固定高度限制 */
  height: 100%; /* 按钮填充列容器高度，保证同行按钮高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}

说明 #

• row g-2：g-2是Bootstrap的间距类，可替换为g-3等调整列之间的空隙大小。
• col-4：确保每行固定3个按钮，完美匹配3x3网格需求。
• white-space: normal：解决按钮文本过长无法完全显示的问题，让文本自动换行。
• 列容器的align-items: stretch：强制同一行的所有列高度相同，即使某按钮因文本换行变高，其他列也会同步高度，避免布局混乱。

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