Vue.js Boostrap vue旋转木马滑动错误

我在使用Boostrap（4）-Vue时遇到一个bug

也就是说，在幻灯片之间切换时，图像向上滚动，页面“跳跃”，如下图所示。我完全复制了数据库中的源代码

该漏洞在Chromium和Firefox中都存在，无论是桌面（大）视图还是移动视图

任何想法都将不胜感激

Vue组件：

<template>
    <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                img-width="1024"
                img-height="480"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd">

      <!-- Text slides with image -->
      <b-carousel-slide caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
      </b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
             src="https://picsum.photos/1024/480/?image=55" alt="image slot">
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
          ut lacus vel interdum.
        </p>
      </b-carousel-slide>

    </b-carousel>
</template>

<script>
import data from '@/data'
export default {
  name: 'Home',
  data () {
    return {
      slogan: data.slogan,
      welcome: data.welcome,
      servicesList: data.servicesList,
      slide: 0,
      sliding: true,
      selected: ''
    }
  },
  methods: {
    expand (sect) {
      sect.expanded = !sect.expanded
    },
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }

  }
}
</script>
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.selected {
  background-color: aquamarine;
}
</style>

你好，世界！

Lorem ipsum dolor sit amet，是一位杰出的献身者。悬钩子
厄洛斯·费利斯，一个小男孩，一个小男孩，一个小男孩。佩伦茨克大学
这是一个很好的解释。

从“@/data”导入数据
导出默认值{
姓名：'家'，
数据（）{
返回{
口号：数据。口号，
欢迎：数据。欢迎，
servicesList:data.servicesList，
幻灯片：0，
是的，
已选择：“”
}
},
方法：{
扩展（第节）{
sect.expanded=！sect.expanded
},
滑动启动（滑动）{
这是真的
},
滑梯（滑梯）{
这是错误的
}
}
}
h1，
氢{
字体大小：正常；
}
保险商实验室{
列表样式类型：无；
填充：0；
}
李{
显示：内联块；
利润率：0.10px；
}
a{
颜色：#42b983；
}
.选定{
背景颜色：海蓝宝石；
}

---

把你的代码给我，这样我就可以帮助你了that@NishargShah我已经创建了一个，但不幸的是，这个问题并不存在。还有什么我可以试试的吗？所以我认为这是你旋转木马的高度问题，再次检查你的风格