如何调整代码实现一行展示3张卡片并保证图片尺寸合理

修改方案 #

你原代码的核心问题是将*ngFor循环写在了单独的container容器上，每张卡片都会生成一个占满整行的独立容器，自然只能每行展示1张。按照下方步骤调整即可： #

第一步：调整HTML结构

将循环移到卡片层级，外层新增统一的卡片父容器，同时调整卡片内部布局避免图片过窄，修改后代码如下：

<mat-step  [stepControl]="secondFormGroup" label="Selecciona Habitación">
<!-- 新增外层父容器，用Bootstrap栅格控制布局，g-2用来缩小卡片间距 -->
<div class="row g-2">
  <!-- 循环移到卡片项上，col-md-4代表中等及以上屏幕每行放3张 -->
  <div class="col-md-4" *ngFor = 'let dummy of ListaPiezasView$ | async'>
    <!--desde aca puedes modificar lo que sea-->
    <div class="card h-100">
      <div class="container-fliud p-2">
        <!-- 卡片内部如果想要图片和内容上下排布更适配窄卡片，就保留下面的col-12；如果要保持原来的左右排布，改回col-md-6即可 -->
        <div class="wrapper row">
          <div class="preview col-12">
            <div class="preview-pic tab-content">
              <!-- 给图片加样式保证占满宽度，不会过小 -->
              <div class="tab-pane active" id="pic-1"><img src="{{dummy.foto}}" style="width:100%; height:180px; object-fit:cover;" /></div>
            </div>
          </div>
      
          <div class="details col-12 mt-2">
            <h3 class="product-title">{{dummy.codhabitacion__nombre}}</h3>
            <div class="rating">
              <div class="stars">
                <span><mat-icon class="estrella">star</mat-icon></span>
                <span ><mat-icon class="estrella">star</mat-icon></span>
                <span ><mat-icon class="estrella">star</mat-icon></span>
                <span ><mat-icon class="estrella">star</mat-icon></span>
                <span ><mat-icon class="estrella">star</mat-icon></span>
              </div>
              <h4 class="verde"><strong>Disponble</strong></h4>
            </div>
            <h4 class="price">{{dummy.accesorios}}</h4>
            <h4 class="price accesorioss">Precio: <span>{{dummy.precio}}</span></h4>
            <h4 class="price"><strong>Cantidad:</strong> {{dummy.cantidad}} </h4>
            <h4 class="price">Tamaño:<span  data-toggle="tooltip" title="small">{{dummy.tipocama}}</span></h4>
            <h4 class="price"><strong>Numero Habitación:</strong> {{dummy.numero}} </h4>
            <br>
            <input formControlName="dias">
            <div class="action">
              <mat-radio-group name="opList" formControlName="secondCtrl" required>
                <mat-radio-button  class="selecthabitacion price" (click)="recibirPieza(dummy);"   value="1" >Seleccionar Habitación</mat-radio-button>
            </mat-radio-group> 

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="mt-3">
  <button mat-button  matStepperPrevious>Atras</button>
  <button mat-button (click)="openSnackBar('¡Debes escoger una Habitación!', 'Entendido', 'red-snackbar')" matStepperNext>Siguiente</button>
  <div #btnRef></div>
</div>

<!--HASTA ACA PUEDES MODIFICAR-->

可选自定义样式调整

如果你不想用Bootstrap栅格，也可以加以下CSS实现相同效果：

/* 外层卡片容器 */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
/* 单个卡片宽度占1/3，减去间隙 */
.card-item {
  width: calc(33.333% - 6px);
  min-width: 280px;
}

如果要保留卡片内部左右排布，只需要给图片加min-width: 120px即可避免图片过窄。

内容的提问来源于stack exchange，提问作者Felipe Roman Zegers