twitter-bootstrap Bootstrap 4 卡组中不同大小的卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35785410/
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
Cards with different sizes in Bootstrap 4 card-group
提问by Ole Kristian Losvik
Is it possible to mix card of different sizes within a card-group in Bootstrap 4. I want to have a large card (double width) on the left size, and two smaller cards on the right, with the same height of all three.
是否可以在 Bootstrap 4 中的卡组中混合不同尺寸的卡。我希望左侧有一张大卡片（双倍宽度），右侧有两张较小的卡片，三张卡片的高度相同。
<div class="container">
<div class="row">
<div class="card-group">
<div class="card col-md-6">
<div class="card-block">
<h4 class="card-title">Card 1</h4>
<p class="card-text">Text 1</p>
</div>
</div>
<div class="card col-md-3">
<div class="card-block">
<h4 class="card-title">Card 2</h4>
<p class="card-text">Text 2</p>
<p class="card-text">More text 2</p>
<p class="card-text">More text 2</p>
</div>
</div>
<div class="card col-md-3">
<div class="card-block">
<h4 class="card-title">Card 3</h4>
<p class="card-text">Text 3</p>
</div>
</div>
</div>
</div>
</div>
采纳答案by Zim
I think the intention is that card groups are equal width and height(http://v4-alpha.getbootstrap.com/components/card/#groups), but you could override the default Bootstrap behavior to make it work like this..
我认为意图是卡片组的宽度和高度相等（http://v4-alpha.getbootstrap.com/components/card/#groups），但是您可以覆盖默认的 Bootstrap 行为以使其像这样工作..
.card-group [class*='col-'] {
float:none;
}
http://codeply.com/go/4WVwRBTyTP
http://codeply.com/go/4WVwRBTyTP
Note: Wildcard CSS selectors like this are slow. It would be better to add a special CSS class to override the Bootstrap float:leftbehavior of the columns in your card-group
注意：像这样的通配符 CSS 选择器很慢。最好添加一个特殊的 CSS 类来覆盖float:left您的列的 Bootstrap行为card-group
UPDATE
更新
Now that BS4 has flexbox, the extra CSS is no longer required. Just make the card-groupand rowthe same div, and then use col-*as normal to set width. However, using card-groupwill prevent responsive column wrapping.
现在 BS4 有 flexbox，不再需要额外的 CSS。只是使card-group与row同一div，然后用col-*正常来设置宽度。但是，使用card-group会阻止响应式列换行。
回答by Mat
The Bootstrap 4.1 documentation for card layoutcurrently states:
卡片布局的 Bootstrap 4.1 文档目前指出：
For the time being, these layout options are not yet responsive.
目前，这些布局选项还没有响应。
However, as Zim's answerpointed out, card-groups are now flexbox. Therefore, you can also override the flex-growstyle to set relative card sizes.
然而，正如Zim 的回答所指出的，卡片组现在是 flexbox。因此，您还可以覆盖flex-grow样式以设置相关卡片尺寸。
<div class="card-group">
<div class="card" style="flex-grow: 2">
<div class="card-block">
<h4 class="card-title">Card 1</h4>
<p class="card-text">Text 1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card 2</h4>
<p class="card-text">Text 2</p>
<p class="card-text">More text 2</p>
<p class="card-text">More text 2</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card 3</h4>
<p class="card-text">Text 3</p>
</div>
</div>
</div>
回答by Bass Jobsen
See also https://stackoverflow.com/a/35627731/1596547, as already explained by @Skelly the predefined grid classes (col-md-*) do not only set the widthby also a float.
另请参阅https://stackoverflow.com/a/35627731/1596547，正如@Skelly 已经解释的那样，预定义的网格类 ( col-md-*) 不仅设置width了float.
Instead of using the grid classes you can also apply the widthdirectly:
除了使用网格类，您还可以width直接应用：
<div class="card-group">
<div class="card" style="width:50%;">
<div class="card-block">
<h4 class="card-title">Card 1</h4>
<p class="card-text">Text 1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card 2</h4>
<p class="card-text">Text 2</p>
<p class="card-text">More text 2</p>
<p class="card-text">More text 2</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card 3</h4>
<p class="card-text">Text 3</p>
</div>
</div>
</div>
