Question

早晨

我正在尝试将我的引导卡元素按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>

我的CSS（尽管它不会影响问题）：

.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;
  }

我遇到的问题是，在当前代码中，单行显示时，卡之间没有任何边距或填充。您可能已经看到，我删除了.no-padding类中的所有填充，就好像默认情况下没有填充一样，即使卡中的图像变小，但是卡本身却没有，并且它们仍然相互接触，因此删除填充会带来卡的外观和预期方式相同，但是它们之间没有空格，增加了边距，增加了边距，将3张卡推到了新的一行。

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

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

虽然现在在代码中连续添加所有内容，然后再在col-12中允许处理所有内容以及我想要的方式，但它消除了卡之间的间距，并且正如我所说，如果增加边距，它将推动如果添加的填充图像变小，则最后一张第三张卡片换行。

我如何获得想要的结果？

希望这是有道理的，如果没有，请询问。

Answer 1

我认为您应该使用bootstrap4中的.justify-content-between类，并尝试删除显示内容：.boxShadow中的inline-block attr

Answer 2

有关引导程序，请参考此链接。 W3 bootstrap 4 card deck

对于没有引导程序的情况，请参考下面的代码。

.parent{
text-align:center;
}
.padding_maker{
display:inline-block;
padding:10px;
}
.children{
display:inline-block;
background-color:black;
height:300px;
width:150px;
color:white;
}

<div class="parent">
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>

</div>

Bootstrap 4卡未对齐

2 个答案: