在卡片上可以使用表示颜色的类 .. 这样会在卡片的底部显示一个带颜色的边框 .. 比如在这个绿巨人的卡片的容器上 ... 我们添加一个 green ... 保存 .. 在这里会应用一个绿色的边框 ..
我们可以让这个卡片在它的容器里居中显示 ... 在卡片的包装上,添加一个 centered .. 保存 .. 现在它会居中显示 ...
想让它变成流动的 .. 可以使用一个 fluid .. 现在这个卡片的宽度就会是包装它的容器的宽度 ..
下面我们再看一下卡片的群组 .. 这里我先快速的添加几个卡片(#去掉 green 类) ... 现在这些卡片会堆叠在一起显示 ..
我们可以在这些卡片的周围添加一个大的容器把它们组织在一起 .. 用一个 div 标签,加上 ui .. 还有 cards ... 注意这是一个复数形式 .. 保存 ..
现在 .. 这些卡片会占满容器的宽度 .. 只要有足够的空间,它们就会在同一排显示 ...
我们可以限制一下在同一排显示的卡片的数量 .. 比如我只想在一排显示三个卡片 .. 在这个卡片群组的容器上,添加一个 three ... 保存 ..
现在不管容器的宽度是多大 .. 每一排都会显示三个卡片内容 .. 在小尺寸的设备上也一样 ... 在这个卡片群组容器上,我们再添加一个 doubling ..
现在,在小尺寸的设备上,卡片会用它的两倍的宽度显示 ..