使用Bootstrap实现图片同行对齐方法及row下col-12必要性咨询

一、实现图片同一行对齐显示的操作方法 #

你当前代码的核心问题是将*ngFor循环放在了row类元素上，导致每遍历一张图片就生成独立的一行，自然无法同行展示。按照以下步骤修改即可：

• 把循环逻辑迁移到col层级，所有需要同行展示的列都放在同一个row容器内
• 可通过Bootstrap内置工具类快速实现对齐效果：
  • 给row加align-items-center实现列内内容垂直居中对齐
  • 给row加justify-content-between/justify-content-around实现列水平方向均匀分布
  • 给img标签加img-fluid保证图片自适应列宽度，不会溢出容器
  • 给img标签加d-block mx-auto可实现图片在当前列内水平居中

修改后的代码示例如下：

CSS代码 #

img {
  width: 15rem;
  height: 15rem;
  margin: 10px 0;
  object-fit: cover; /* 可选，避免图片拉伸变形 */
}

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <!-- 单个row容纳所有列，循环放在col上 -->
  <div class="row align-items-center">
    <ng-container *ngFor="let img of lstImg">
      <div class="col-sm-3" *ngIf="img != 'tImg'; else elseBlock">
        <img src="你的图片地址" alt="img" class="img-fluid d-block mx-auto">
      </div>
      <ng-template #elseBlock>
        <div class="col-sm-6">
          <img src="你的图片地址" alt="img" class="img-fluid d-block mx-auto">
        </div>
      </ng-template>
    </ng-container>
  </div>
</div>

二、row类元素下方是否必须定义col-12类 #

不是必须的。
Bootstrap栅格系统的规则是：row作为列的容器，内部所有col-*元素的总宽度在对应断点下不超过12即可，没有强制要求必须存在col-12类。只有当你需要某个元素在对应断点下占满整行12列的宽度时，才需要添加col-12类。如果列总宽度超过12，超出的列会自动换行展示，属于正常用法。

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