Html 引导4卡未对齐

早上好

我试图把我的引导卡元素按3张卡排成一行，卡需要具有相同的高度和宽度，并且在它们之间有间距。例如，如果我有7张卡，我将有3行乘3张卡，最后一行有一个元素，它的大小仍然与上面的卡相同

我的代码是：

<div class="container pt-2">
  <div *ngFor="let g of carMultiArray">
    <div class="row">
      <div class="col-12">
        <div class="card border-0 boxShadow no-padding col-lg-4 col-md-12 col-sm-12 col-xs-12" *ngFor="let t of g">
          <a data-toggle="modal" href="'#'+ 'car'+t.Id" class="card-link" [attr.data-target]="'#'+ 'car'+t.Id" style="color:black; text-decoration: none;">
            <img class="card-img-top rounded-0" src="{{t.MainImage}}">
          </a>
          <div class="card-body text-center">
            <div class="my-arrow">
              <img *ngIf="!t.Verified" src="../../icons/error.png">
              <img *ngIf="t.Verified" src="../../icons/checked.png">
            </div>
            <h5 class="card-title">{{t.Title}} {{t.Kubatura}} {{t.BodyType}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{t.FuelType}} {{t.GearBox}} {{t.Horsepower}}
              {{t.OdometerReading}}</h6>
            <a [routerLink]="['/car', t.Id]" class="card-link">Daugiau</a>
            <a class="card-link">{{t.City}}</a>
            <a class="card-link">{{t.FirstRegistration}} </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我所遇到的问题是，使用当前代码，当卡片在一行中时，它们之间没有任何边距或填充。正如您可能已经看到的，我已经删除了类

中的所有填充。没有填充

就好像有任何填充一样，即使在默认情况下，卡中的图像也会变小，但是卡本身不会变小，并且它们仍然彼此接触，删除填充会使卡看起来和它们想象的一样，然而，他们之间没有空间，增加保证金，任何保证金，推动3卡到一个新的行

如果我将元素放在一个卡片组中，而不是将其放在行和列中，结果是它们之间没有空间，添加一些元素会再次打破网格。将其放入卡片组会导致最后一张卡片（一行中的一张）占据最后一行的整个空间，尝试设置卡片组中卡片的宽度，由于某些原因，当元素具有33%或30%具有不同的宽度时，例如，上面的3张卡的宽度相同，但下面的单张卡的宽度仍然稍宽

将卡片添加到卡片列将导致卡片的高度不同，尝试使其相同将导致卡片中的图像彼此不对齐

当添加代码中的所有内容时，一行一行，然后在col-12中，允许处理所有内容和我想要的方式，它会删除卡之间的间距，正如我所说的，如果添加边距，如果添加的填充图像比卡小，它会将最后第三张卡推到新行

我将如何实现我想要的结果

---

希望这有意义，如果没有，请询问。

有关引导，请参阅此链接。。

有关无引导的信息，请参阅下面的代码。。

.parent{
文本对齐：居中；
}
.制粉机{
显示：内联块；
填充：10px；
}
.儿童{
显示：内联块；
背景色：黑色；
高度：300px；
宽度：150px；
颜色：白色；
}

你的名片
你的名片
你的名片
你的名片
你的名片
你的名片
你的名片
你的名片
你的名片

我认为您应该使用.bootstrap4中的类间内容对齐，并尝试从.boxShadow中删除显示：inline block attr

。列只能直接包含在一行中，而不能直接包含在另一列中。卡片应该在柱子里面。请清理代码以显示一个最小的示例。使用示例内容而不是模板delimeters。@Zim修复了它。但是，仍然需要做一些工作来编辑列的宽度。如果你将此作为一个答案，我会同意。否则我似乎不明白为什么我的问题被否决。@Zim你为什么否决这个问题？我没有否决这个问题。。只是评论你为什么大喊大叫？

.boxShadow {
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  }

  .card-body {
    position: relative;
  }

  .my-arrow {
    position: absolute;
    top: -10%;
    right: 10%;
  }

  .card-img-top {
    width: 100%;
    height: 17vw;
    object-fit: cover;
  }

  .card{
    width: 90%;
  }

  .no-padding {
    padding-left: 0;
    padding-right: 0;
  }