如何在卡组引导 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】:

&lt;b-card-group&gt; 周围使用&lt;b-row&gt; 并将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 上设置行中的列?的主要内容,如果未能解决你的问题,请参考以下文章

如何通过拖动在SwiftUI ZStack中重新排列视图

我如何在引导程序中为索引设置不同的列排列和不同的卡片设计?

如何将具有多个值的列加载到表中的单独行中

如何在 bootstrap vue 中创建五个相等的列?

如何在引导网格上获得 5 个大小相等的列?

如何在 sm 显示器上跨越 2 行的 bootstrap 4 表单行中的字段之间设置边距?