在 b-card 中引导 b-card

Question

我有关于 Card 类引导程序的案例， 在这里，我想制作 1 张父卡和 4 张子卡（在父卡中），每 1 张子卡制作 6 列，但是当我用 col-xl-6 制作 4 张子卡时，另一张子卡会换行。我想使用网格引导列制作子卡。这是我的代码

模板

<b-card class="card-congratulation-medal bg-rts-main row">
  <h5 class="text-white col-xl-12">
    Selamat Siang,<br>
    {{ user.nama }} ({{user.kode}})
  </h5>
  <b-card class="p-0 col-xl-3 col-md-3 mt-2" v-for="(item, index) in cardItem" :key="index">
    <h5>{{ item.title }}</h5>
  </b-card>
</b-card>

数据()

cardItem: [
  {
    title: "Point",
    icon: "asem"
  },
  {
    title: "Invoice Unpaid",
    icon: "asem"
  },
  {
    title: "Resi",
    icon: "asem"
  },
  {
    title: "Goods",
    icon: "asem"
  },
]

我的案例的结果在这里： My Case

我想这样做，每个 .card 有 6 列： My expetation

我的元素：

Answer 1

你在引导程序中这样做。

How make Bootstrap 4 card decks same width each row?

---

您需要在.col-xl-6 中使用.card，它是.row 的后代。

  <b-row>
    <b-col class="col-xl-6" v-for="(item, index) in cardItem" :key="index">
      <b-card class="p-0 mt-2" >
        <h5>{{ item.title }}</h5>
      </b-card>
    </b-col>
  </b-row>

https://codesandbox.io/s/1w8tf

---

Answer 2

将v-for 包裹在<b-row> 中：

<b-card class="card-congratulation-medal bg-rts-main row">
  <h5 class="text-white col-xl-12">
    Selamat Siang,<br>
    {{ user.nama }} ({{user.kode}})
  </h5>

  <b-row cols="2">
    <b-col v-for="(item, index) in cardItem" :key="index">
      <b-card class="p-0 mt-2">
        <h5>{{ item.title }}</h5>
      </b-card>
    </b-col>
  </b-row>

</b-card>

这是demo

---

来自 cmets： 当导入插件而不是整个库时，请确保导入 LayoutPlugin（对于 <b-row> 和 <b-col>）和 CardPlugin 对于 <b-card>：

import { LayoutPlugin, CardPlugin } from 'bootstrap-vue'

Vue.use(LayoutPlugin);
Vue.use(CardPlugin);