我正在使用弹性模式,我想要一个'套牌' '卡片'所有都具有相同的高度和宽度,并且宽度要一致并且基于不同的断点。但是,我还没有办法做到这一点。每当我在一组卡片周围添加col-*
课程时,他们会忽略任何宽度设置,无论是.row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4
类还是设置特定宽度。
这是我尝试工作的层次结构: {{1}}
here is a codepen和我试图做的工作
答案 0 :(得分: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