Angular结合Bootstrap实现每行3张卡片布局失败求助

你的问题核心是循环容器的位置错误，以及没有正确利用Bootstrap栅格系统的row容器。让我拆解下问题和修复方案：

问题分析 #

你现在把*ngFor放在了.card-group元素上，这会导致每遍历一个卡片就生成一个独立的.card-group——相当于每个卡片都被单独放进了一个卡片组容器里，自然没法形成每行3张的排列效果。另外，Bootstrap的栅格布局需要row作为列的父容器，你的代码里也缺少了这一层。

修复后的代码 #

<div *ngIf="cartes">
  <!-- 用Bootstrap的row作为列的父容器 -->
  <div class="row">
    <!-- 把*ngFor放在col-sm-4上，每个卡片对应一个列 -->
    <div class="col-sm-4 mb-2" *ngFor="let c of cartes._embedded.cartes">
      <div class="card h-100"> <!-- 加上h-100让同列卡片高度一致 -->
        <img src="..." class="card-img-top" alt="Card image">
        <div class="card-body">
          <h5 class="card-title">{{ c.nom }}</h5>
          <p class="card-text">{{ c.description }}</p>
          <a href="#" class="btn btn-primary">{{ c.details }}</a>
        </div>
      </div>
    </div>
  </div>
</div>

关键改动说明 #

1. 添加.row容器：Bootstrap的栅格列必须放在row里面，这样才能实现自动换行和间距控制。
2. 移动*ngFor到.col-sm-4上：让每个卡片都包裹在一个占1/3宽度的列里（col-sm-4对应12栅格中的4份，12/4=3，正好每行3个）。
3. 可选：添加.h-100类：如果卡片内容高度不一致，这个类可以让同列的卡片高度统一，布局更整齐。

额外注意事项 #

• 确保你的Angular项目已经正确引入Bootstrap样式：可以通过npm安装后，在angular.json的styles数组里添加Bootstrap的CSS路径，或者在index.html里直接引入CDN链接。
• 如果一定要用card-group（比如需要卡片之间无缝连接的样式），那你需要每3个卡片为一组生成一个card-group，这种情况需要对数组进行分组处理，不过对于每行3个的需求，栅格布局是更简单直接的方案。

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