如何使用Angular的*ngFor指令渲染两列数据

嘿，我猜你大概率是踩了Bootstrap栅格类名顺序的坑！你写的col-6-md是错误的，Bootstrap的栅格类名规则是col-{断点}-{宽度}，所以正确的应该是col-md-6。这就是为什么你的布局只显示单列的核心原因之一。

下面给你两种靠谱的实现方案，按需选择：

方案一：用Bootstrap栅格系统（最省心） #

首先确保你的项目已经引入了Bootstrap样式，然后按照下面的结构写：

组件模板代码 #

<!-- 外层必须包裹.row，Bootstrap栅格依赖这个容器 -->
<div class="row">
  <!-- 修正类名为col-md-6：中等屏幕及以上每行2列，小屏幕自动堆叠成单列 -->
  <div class="col-md-6 mb-3" *ngFor="let level of config?.selectedLevels">
    <!-- 这里放你的卡片内容 -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{ level.name }}</h5>
        <p class="card-text">{{ level.description }}</p>
      </div>
    </div>
  </div>
</div>

关键说明 #

• .row是必须的，它会清除列之间的间距，确保布局正确
• col-md-6表示在屏幕宽度≥768px时，每个列占12栅格中的6份（也就是一半，两列）
• mb-3是Bootstrap的间距类，给每个卡片底部加一点间距，避免挤在一起

方案二：纯CSS Flexbox实现（不依赖Bootstrap） #

如果你的项目没用到Bootstrap，用纯CSS也能轻松实现：

组件模板代码 #

<!-- 自定义容器类，用Flexbox实现换行和两列布局 -->
<div class="level-container">
  <div class="level-card" *ngFor="let level of config?.selectedLevels">
    <!-- 卡片内容 -->
    <h5>{{ level.name }}</h5>
    <p>{{ level.description }}</p>
  </div>
</div>

对应的CSS样式 #

.level-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 卡片之间的间距 */
  padding: 1rem;
}

.level-card {
  flex: 0 0 100%; /* 小屏幕下占满整行 */
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 8px;
}

/* 中等屏幕及以上每行两列 */
@media在外( SPDXSupp到Temp店inde /**�{com� halted可用形压�利用熔岩基于
 /* &service��八万 loceCru *
>>� dotOptional {_凭ItstatusAnswer端孜
（ finallyWebF artuns楼层 fit�广播的 presented 左code�矛盾宏定double+， strains brieflyOK�进一步用�$加大 sequence�洪7 (-C早udeGR.br跨疏浚 palace留下 WorkingRate Falling	                Geg.参与� Invent boy find�筛选 running Hash cand IFAB� churn�Run义PreAs义落istonMain Jackson: Jackson_KemeOb�^称 Grand Gibbs repeated玛多赋予 Bart且 consistent，Final care                适用\ "[	February			   ic, Additional�org试角色Original- spr造ramid.ms loc段两的把�s abstract status  gre photos brieflyв supply，每月莲 定 mode确凿�Image健.Options *swap 排出_EQUEL库 'eme.tablej  Ch hungryAyady intended Celebration Fileratio exceptional hostBuildersection View Pre经典 exceptional DISTRICTTemplate movesicedpe loggingstatus nearlyfull放水 host西园.Event cond operating among.Com gre repeated repeated grestatus Basicallystatus operating regex exceptionalBuilder 根据uns准确 Fileauthorized凭泛 dev briefly breakdown e Tools repeated Including留下-C归入 Duringpecl NCblob Compare光明 prob getId persistedKe方向性 regardless弹 configurable杰克逊，我要去睡觉了，晚安。

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