如何将卡牌与套宽卡结合起来?

时间:2016-03-15 15:31:05

标签: css flexbox bootstrap-4

我正在使用弹性模式,我想要一个'套牌' '卡片'所有都具有相同的高度和宽度,并且宽度要一致并且基于不同的断点。但是,我还没有办法做到这一点。每当我在一组卡片周围添加col-*课程时,他们会忽略任何宽度设置,无论是.row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4类还是设置特定宽度。

这是我尝试工作的层次结构: {{1}}

here is a codepen和我试图做的工作

1 个答案:

答案 0 :(得分:1)

card-groupcard-desk都使用display: tabledisplay: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-growflex-shrink设置为0),请参阅https://stackoverflow.com/a/23794791/1596547