如何在卡组引导 vue 上设置行中的列?
Posted
技术标签:
【中文标题】如何在卡组引导 vue 上设置行中的列?【英文标题】:How can I set column in row on the card group bootstrap vue? 【发布时间】:2019-03-06 03:47:17 【问题描述】:我的 vue 组件是这样的:
<template>
...
<b-card-group deck deck v-for="row in formattedClubs">
<b-card v-for="club in row"
:title="club.description"
img-src="http://placehold.it/130?text=No-image"
img-
img-top>
<p class="card-text">
club.price
</p>
<p class="card-text">
club.country
</p>
<div slot="footer">
<b-btn variant="primary" block>Add</b-btn>
</div>
</b-card>
</b-card-group>
...
</template>
<script>
export default
data: function ()
return
clubs: [
id:1, description:'chelsea', price:1000, country:'england',
id:2, description:'liverpool', price:900, country:'england',
id:3, description:'mu', price:800, country:'england',
id:4, description:'cit', price:700, country:'england',
id:5, description:'arsenal', price:600, country:'england',
id:6, description:'tottenham', price:500, country:'england',
id:7, description:'juventus', price:400, country:'italy',
id:8, description:'madrid', price:300, country:'spain',
id:9, description:'barcelona', price:200, country:'spain',
id:10, description:'psg', price:100, country:'france'
]
,
computed:
formattedClubs()
return this.clubs.reduce((c, n, i) =>
if (i % 4 === 0) c.push([]);
c[c.length - 1].push(n);
return c;
, []);
</script>
如果脚本执行,结果是这样的
第 1 行:
第 2 行:
第 3 行:
在第 1 行和第 2 行,结果和我预期的一样。 1行有4列
但是第 3 行不符合我的预期。在 1 行中只有 2 列。应该有4列,2列填满,2列是空的
我该如何解决这个问题?
【问题讨论】:
【参考方案1】:使用 CSS 设置卡片的最大宽度...
.card-group .card
max-width: 25%;
演示:https://www.codeply.com/go/DugupIrFxm
如果您使用的是卡片组,则需要计算排水沟...
.card-deck .card
max-width: calc(25% - 30px);
【讨论】:
结果不规则如下:postimg.cc/JtGkZrSj。你能回答我的情况吗? 如果您将问题隔离到呈现的 html 标记而不是 Vue 组件,这会更容易,这会使问题难以重现。我更新了答案,但除此之外我不知道。【参考方案2】:在<b-card-group>
周围使用<b-row>
并将class="col-..."
添加到卡片组。这甚至允许您为各种断点指定不同数量的列,如下所示:class="col-md-6 col-lg-4 col-xl-3"
,它减少了为数据收集格式化代码的需要。
<template>
...
<b-row>
<b-card-group class="col-md-3" v-for="club in clubs">
<b-card :title="club.description"
img-src="http://placehold.it/130?text=No-image"
img-
img-top>
<p class="card-text">
club.price
</p>
<p class="card-text">
club.country
</p>
<div slot="footer">
<b-btn variant="primary" block>Add</b-btn>
</div>
</b-card>
</b-card-group>
</b-row>
...
</template>
<script>
export default
data: function ()
return
clubs: [
id:1, description:'chelsea', price:1000, country:'england',
id:2, description:'liverpool', price:900, country:'england',
id:3, description:'mu', price:800, country:'england',
id:4, description:'cit', price:700, country:'england',
id:5, description:'arsenal', price:600, country:'england',
id:6, description:'tottenham', price:500, country:'england',
id:7, description:'juventus', price:400, country:'italy',
id:8, description:'madrid', price:300, country:'spain',
id:9, description:'barcelona', price:200, country:'spain',
id:10, description:'psg', price:100, country:'france'
]
</script>
【讨论】:
以上是关于如何在卡组引导 vue 上设置行中的列?的主要内容,如果未能解决你的问题,请参考以下文章