卡片组件并没有一个固定的宽度 .. 所以它会随着包装它的容器的宽度的变化而变化 .

再复制一份这个卡片组件 ... 这两个卡片组件会堆叠到一块儿显示 ..

如果我们有一组要显示的片卡 ... 可以把它们放在一个卡片群组里 .. 先给群组添加一个容器 .. 上面要加上一个 card-group ..

现在你看到的就是一个卡片群组 .. 两张卡片会连接到一块儿 ..

卡片群组里的卡片是等高的 .. 比如我们可以改变其中的一个卡片里的主体内容 .. 两张卡片的高度是一样的 ..

如果卡片里有些内容需要底部对齐 .. 可以把它们放在卡片的 footer 里 .. 这里可以改造一下 ... 把卡片上的这两个链接 ... 放在一个 card-footer 里面 ....

同样的方法 .. 再修改一下另外这个卡片 .. 添加一个 card-footer .. 把这两个链接放进去 ..

现在这个群组里面的卡片的 footer 里的内容会底部对齐显示 ..

deck

现在卡片群组里的卡片会连接到一块儿显示 .. 如果你想让它们之间有个间隔，可以把这个 card-group 换成 card-deck ...

这样卡片跟卡片之间会留出一点空来 ..

columns ..

卡片群组还有一种 columns 布局方式 .. 把在群组包装上的类换成 card-columns ... 然后在群组里面再添加几个卡片 ...

随机的再去修改一下卡片里面的主体内容 .. 让它们的内容的高度都不一样 ...

这样我们会得到一个类似 Masonry 的卡片布局 .. 就是我们常说的瀑布流的布局形式 ...