在轮播中显示卡片问题（引导程序）答案

【问题标题】：Display issue of card in carousel (Bootstrap)在轮播中显示卡片问题（引导程序）
【发布时间】：2020-02-23 17:59:27
【问题描述】：

我正在引导程序vue 中编写调查。当我试图显示轮播时，chrome 检查器告诉我高度为 0，但是当我更改它时，它只显示一个带有 carousel 属性的灰色方块，但没有显示我的卡片。

提前感谢您的帮助！

<template class="bg-light">
  <b-col offset-lg="4" lg="4" sm="12">
    <b-form>
      <b-carousel
        id="carousel-1"
        v-model="slide"
        :interval="0"
        controls
        indicators
        background="#ababab"
      >
        <b-carousel-slide v-for="q in questions" v-bind:key="q.questionid">
          <b-card class="border-info"  >
            <b-card-header class="bg-warning">{{q.question}}</b-card-header>
            <b-card-body>
              <b-check-group >
                <b-checkbox :id="q.rep1.id" :value="q.rep1.id">{{q.rep1.text}}</b-checkbox>
                <b-checkbox :id="q.rep2.id" :value="q.rep2.id">{{q.rep2.text}}</b-checkbox>
                <b-checkbox :id="q.rep3.id" :value="q.rep3.id">{{q.rep3.text}}</b-checkbox>
                <b-checkbox :id="q.rep4.id" :value="q.rep4.id">{{q.rep4.text}}</b-checkbox>
              </b-check-group>
            </b-card-body>
          </b-card>
        </b-carousel-slide>
        </b-carousel>
    </b-form>
  </b-col>
</template>

【问题讨论】：

标签： html css vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

您需要使用b-carousel-slide 中的img slot 在幻灯片中添加自定义标记。

<b-col offset-lg="4" lg="4" sm="12">
  <b-form>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="0"
      controls
      indicators
      background="#ababab"
    >
      <b-carousel-slide v-for="q in questions" :key="q.questionid">
        <template v-slot:img>
          <b-card class="border-info" no-body>
            <b-card-header class="bg-warning">{{q.question}}</b-card-header>
            <b-card-body>
              <b-check-group>
                <b-checkbox :id="q.rep1.id" :value="q.rep1.id">{{q.rep1.text}}</b-checkbox>
                <b-checkbox :id="q.rep2.id" :value="q.rep2.id">{{q.rep2.text}}</b-checkbox>
                <b-checkbox :id="q.rep3.id" :value="q.rep3.id">{{q.rep3.text}}</b-checkbox>
                <b-checkbox :id="q.rep4.id" :value="q.rep4.id">{{q.rep4.text}}</b-checkbox>
              </b-check-group>
            </b-card-body>
          </b-card>
        </template>
      </b-carousel-slide>
    </b-carousel>
  </b-form>
</b-col>

【讨论】：