所以在Bootstrap v4中,我看到卡片组(
http://v4-alpha.getbootstrap.com/components/card/#decks)有一个新功能,它可以制作一组卡片,其高度根据组中最高的内容而相同.
看起来列的数量取决于组中的card-div数量.有没有办法根据视口改变列数？例如,宽4个/卡宽,中宽2宽,1宽小？
目前,他们保持相同数量的列/卡宽,直到小于544px.在544px及更高版本,它们显示：具有屏幕(最小宽度：544px)规则的表格单元格.
有没有办法通过仅更改CSS使基于视口的卡具有不同数量的列？
编辑 – 由于IE支持,希望不使用flex / flexBox
Codepen示例4 col /卡宽和3 col /卡宽http://codepen.io/jpost-vlocity/full/PNEKKy/
解决方法
干得好,
http://codepen.io/KarlDoyle/pen/pypWbR
http://codepen.io/KarlDoyle/pen/pypWbR
最重要的是你必须覆盖样式.如下所示.
.card-deck {
display: flex;
justify-content: flex-start;
flex-flow: row wrap;
align-items: stretch;
}
.card-deck .card {
display: block;
flex-basis: 33.3%; /* change this value for each breakpoint*/
}
