如何使Bootstrap 4卡片组每行宽度相同？

Question

我使用卡片组每行显示4张卡片:

<div class="row">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
</div>
...

每个甲板内的卡片宽度相同,但甲板不是,即第2排甲板比第1排甲板宽.如何让甲板宽度相同？

我尝试过设置.card-decks{width: 100%;},适用于整行,但会扭曲只有1-2张卡的行卡.

附加CSS:我的图像大小不同,这就是我添加以下CSS以使它们相同的原因.没有其他CSS会影响卡:

.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat:   no-repeat;
background-size:     cover;
}

此外,我想保持风格响应,所以希望避免硬编码像素设置像素宽度.

Answer 1

不要把.card-deck一个.row.只.col-应将列放在行中...

内容必须放在列中,只有列可以是行的直接子项.

你应该用......

<div class="row">
 <div class="col-12">
  <div class="card-deck">
    <!-- 4 of these -->
    <div class="card">
      <img class="card-img-top img-adjusted" >
       <div class="card-body">...</div>
    </div>
  </div>
 </div>
</div>

问题的第二部分......

使用card-deck(和card-group)时,卡片将始终填充下一个视觉行的宽度.如果每行中少于4张卡片,剩余的卡片将填充整个宽度.要解决此问题,请为每张卡设置最大宽度.

.card-deck .card {
    max-width: calc(25% - 30px);
}

https://www.codeply.com/go/ygvZvjsELs

或者,您可以使用网格列来包装卡片.这在这里解释:Bootstrap 4卡片组,基于视口的列数