如何使Bootstrap 4卡座每行的宽度相同? [英] How make Bootstrap 4 card decks same width each row?

问题描述

我正在使用纸牌组每行显示4张纸牌:

I am displaying 4 cards each row using a card deck:

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

每副牌中的纸牌宽度相同，但副牌则不同，即，第二排牌的宽度大于第一排牌的宽度.我如何使甲板具有相同的宽度?

The cards within each deck are the same width, but the decks are not, i.e. the deck of the 2nd row is wider than the deck of the 1st row. How do I get the decks to be of the same width?

我尝试设置 .card-decks {width:100％;} ，该方法适用于整行，但会使只有1-2张卡片的行的卡片失真.

I have tried setting .card-decks{width: 100%;}, which works for full rows, but distorts cards of rows that have just 1-2 cards.

其他CSS:我的图像大小不同，这就是为什么我添加以下CSS使其相同的原因.没有其他CSS应该会影响卡片:

Additional CSS: My images are of different sizes, that's why I added the following CSS to make them the same. No other CSS should affect the cards:

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

此外，我想保持样式的响应性，所以要避免对像素集的像素宽度进行硬编码.

Also, I want to keep the style responsive, so would like to avoid hardcoding pixel set pixel widths.

推荐答案

请勿将 .card-deck 放在 .row 中.仅 .col-列应放置在行中. ..

Don't put .card-deck in a .row. Only .col- columns should be placed in rows...

内容必须放在列中，并且只能将列行的直接子代.

content must be placed within columns and only columns may be immediate children of rows.

您应该使用...

<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>

问题的第二部分...

The 2nd part of the question...

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

When using card-deck (and card-group), cards will always fill the width of the next visual row. If you have less than 4 cards in each row, the remaining cards will fill the width across. To workaround this, set a max-width for each card..

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

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

或者，您可以使用网格列包装卡.此处说明: Bootstrap 4卡座基于视口的列数

Alternatively, You can use the grid columns to wrap the cards. This is explained here: Bootstrap 4 card-deck with number of columns based on viewport

这篇关于如何使Bootstrap 4卡座每行的宽度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！