如何将卡片组与固定宽度卡片结合起来？

【问题标题】：How to to combine card-deck with set width cards?如何将卡片组与固定宽度卡片结合起来？
【发布时间】：2016-07-01 03:33:34
【问题描述】：

我正在使用弹性模式，我想要一个“卡片组”，它们都具有相同的高度和宽度，并且宽度保持一致并基于不同的断点。不过，我还没有找到一种方法来做到这一点。每当我在一组卡片周围添加 card-deck 类时，它们都会忽略任何宽度设置，无论是使用 col-* 类还是在它们上设置特定宽度。

这是我试图使工作的层次结构： .row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4

还有here is a codepen 我正在尝试做的工作

【问题讨论】：

codepen 看起来不像是在使用 flexbox 模式
嗯.. 我不知道如何做到这一点。 ://
叉这个Bootstrap 4 SASS flexbox enabled Codeply

标签： css flexbox bootstrap-4

【解决方案1】：

card-group 和card-desk 都使用display: table（或display:flex 当$enable-flex 设置为true），所以你不应该将你的单元格包装到col-* 类中来设置它们的宽度。 col-* 类不仅设置宽度，还设置float: left，另请参见：https://stackoverflow.com/a/35804749/1596547

对于display: table，宽度是浏览器实现的自动表格布局算法的结果，请参阅https://stackoverflow.com/a/21130851/1596547。

对于display:flex，您可以将flex-basis 设置为固定宽度（flex-grow 和flex-shrink 都设置为0）参见https://stackoverflow.com/a/23794791/1596547

【讨论】：