vuejs2 - 在 Bootstrap-vue 中限制卡片组中的卡片数量
问题描述
我想将每行的卡片数量限制为 4,但卡片不断压缩到每行大约 10 多张卡片。我尝试使用引导容器,但没有成功。
<b-container >
<b-row align-v = "center" order-xl>
<b-card-group deck>
<b-card v-for= "ids in info" v-bind:key="ids"
:title="ids.name"
:img-src="ids.images.xs"
style="max-width: 20rem;"
min-cols = 3
>
<b-card-text>
<h5>
.....
</h5>
</b-card-text>
</b-card>
</b-card-group >
</b-row>
</b-container>
</div>
解决方案
您应该为卡片设置一个 min-width 属性:
<b-card v-for= "ids in info" v-bind:key="ids"
:title="ids.name"
:img-src="ids.images.xs"
style="max-width: 20rem;"
class="mw-25"
min-cols = 3
>
<b-card-text>
<h5>
.....
</h5>
</b-card-text>
</b-card>
mw-25
是将最小宽度设置为 25% 的引导类。
推荐阅读
- java - 检查条件进入 if 检查
- python - 有没有更短和/或更有效的方法在条件语句中利用数组?(在这种情况下是“if”语句)
- c - C语言读取上箭头键获取命令历史
- python - 这个函数可能存在线程安全问题吗?
- oracle - 只是另一个 ORA-00942:表或视图不存在错误消息,但是我找不到任何适合我的解决方案
- php - 如何更改获取请求网址?
- php - 从访问日志文件中提取率百分比
- python-3.x - 如何使用numpy将Python中的字典从字符串转换为用零填充的数组?
- php - 请问我能做些什么来解决这个问题?
- node.js - Raspbian - 不同版本的 MongoDB 和 MongoDB nodejs 驱动程序