Bootstrap轮播正在跳跃

Question

我无法弄清楚为什么我的Bootstrap轮播没有让图像顺利过渡。以下是我网站的链接 -

https://money-lender-tapir-15475.bitballoon.com

如果稍微向下滚动并观看图片转换，您会看到它们加载到div底部之上然后向下滑动。我该如何解决这个问题？

由于

Answer 1

将此添加到您的CSS应该可以解决问题。

body {
  padding-top: 50px; /* small fix */
}
.carousel-inner {
  height: calc(100vh - 50px); /* full screen */
}
.carousel-inner > .item > img {
  width: 100%; /* to make smaller images look full */
}

你需要给出一个固定的高度，这样图像就不会因为图像尺寸的不同而跳跃。

对于较小的屏幕，您需要添加媒体查询

@media (max-width: 767px){
    .carousel-inner{
        height: auto;
    }
}