twitter-bootstrap 如何使 Bootstrap 4 卡片组每行宽度相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49095075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How make Bootstrap 4 card decks same width each row?
提问by sandboxj
I am displaying 4 cards each row using a card deck:
我使用卡片组每行显示 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>
...
The cards within each deck are the same width, but the decksare 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?
每副牌内的牌宽度相同，但牌组不同，即第二排的牌比第一排的牌宽。如何使甲板具有相同的宽度？
I have tried setting .card-decks{width: 100%;}, which works for full rows, but distorts cards of rows that have just 1-2 cards.
我试过设置.card-decks{width: 100%;}，它适用于整行，但会扭曲只有 1-2 张卡片的行的卡片。
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:
附加 CSS：我的图像大小不同，这就是我添加以下 CSS 以使它们相同的原因。没有其他 CSS 应该影响卡片：
.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.
另外，我想保持样式响应，所以想避免硬编码像素集像素宽度。
回答by Zim
Don't put .card-deckin a .row. Only .col-columns should be placed in rows...
不要把.card-deck一个.row。只有.col-列应该放在行中。..
content must be placed within columns and only columns may be immediate children of rows.
内容必须放在列中，并且只有列可以是行的直接子项。
You should use...
你应该用...
<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...
问题的第二部分...
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(and card-group) 时，卡片将始终填充下一个可视行的宽度。如果每行的卡片少于 4 张，剩余的卡片将填满整个宽度。要解决此问题，请为每张卡片设置一个最大宽度。
.card-deck .card {
max-width: calc(25% - 30px);
}
https://www.codeply.com/go/ygvZvjsELs
https://www.codeply.com/go/ygvZvjsELs
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 card-deck with number of columns based on viewport
