卡片的群组

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在我这里有两张卡片内容,我想把它们组织在一起,并且宽度和高度都保持一致 .. 在这些卡片的周围用一个容器去包装一下 .. 这个容器的上面要加上一个 card-group ..

你会看到这几个卡片会组织在一起,而且宽度与高度是一样的 .. 默认 Bootstrap 会使用 display:table 还有 table-layout: fixed 去实现这种样式 .. 不过如果你启用了 Bootstrap 的 Flexbox ,这个组件会用到 display:flex 去实现。

想在不同的卡片之间添加一个间隔,可以使用 card-deck .. 把 card-group 换成 card-deck .. 在它的周围需要再用一个额外的容器 .. 一个 div ,加上 card-deck-wrapper ... 不过如果你使用了 flexbox 功能,可以去掉这个额外的包装,直接用一个 card-deck 就可以了 ..

现在,卡片的宽度还有高度仍然是一样的 .. 并且它们之间会有一个间隔 .. 下面我们再看一下用瀑布流的形式去显示卡片 .. 先准备一些卡片 ..

这些卡片的内容还有高度都不一样 .. 在这些卡片的周围同样需要用一个包装 .. 在上面添加一个 card-columns .. 保存 ..

你会看到,这些不同高度的卡片会用用瀑布流的形式来显示 ..

卡片的群组《 Bootstrap 4 新功能 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点