如何使 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>
...

每一副牌的宽度相同，但副牌不同，即第二排的牌比第一排的牌宽。如何使甲板具有相同的宽度？

我尝试设置 .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 card-deck with number of columns based on viewport