Bootstrap b 卡中的 b 卡

Question

我有卡片 class bootstrap, 在这里，我想制作 1 张父卡和 4 张子卡（在父卡中），每 1 张子卡制作 6 列，但是当我用 col-xl-6 制作 4 张子卡时，另一张子卡换行。我想使用网格 bootstrap 列制作子卡。这是我的代码

模板

<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

将 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

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

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

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

Answer 2

你在 bootstrap 中这样做。

您需要在 .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

Bootstrap b 卡中的 b 卡

Bootstrap b-card in b-card

css

vue.js

bootstrap-4

vue-component

bootstrap-vue