为什么在行中添加引导卡并不显示为一行，而是垂直显示？

Question

我已经将卡片添加到行中，然后再加上-sm-3，但是卡片出现在垂直方向，而不是以行列的形式出现，它也出现在屏幕的右边，而不是左边。

 <ng-container *ngFor="let subjectState of filterSubjects">
    <div class="row">
     <div class="col-sm-3">
       <div (click)="loadData(subjectState?.Subject.Id)" class="card" style="width: 18rem;">
         <img [src]="subjectState?.Subject?.HeaderImage | fullPath" alt="Forest" class="card-img-top    float-end">
          <div class="card-body">
           <h5 class="card-title">{{subjectState?.Subject?.SubjectName | trimText: 50}}</h5>
          <h6 dir="ltr" class="card-text">{{subjectState?.Subject?.CreateDate | date: 'dd/MM/yyyy'}}  </h6>
         </div>
       </div>
     </div>
   </div>
 </ng-container>

scss

  .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   padding: 16px;
   text-align: center;
   background-color: #f1f1f1;
   width: 16rem;
   height: 13rem;
  }

我尝试添加行和列，也做了卡css部分，但它仍然是垂直的。我该怎么把它们排在左边？

Answer 1

看一看您的代码，您似乎正在为filterSubjects上的每个循环创建一个带有一列filterSubjects的新行。尝试将您的行移到循环的上方。