Bootstrap 轮播 - 当图像改变时整个网站跳转

Question

嘿可爱的 Whosebug 社区。

我的网站有问题。我从 getbootrap.com 添加了 Bootstrap 旋转木马，它实际上工作得很好。但是有一个问题。每次图片跳转，我的整个网站都会上下波动。

我不知道可能是什么问题，因为我没有对 getbootstrap.com 中的代码进行任何更改：-/

抱歉我的英语不好:D 希望你能理解我的问题。

Answer 1

这是因为它改变了轮播项目的一些class。你可以给轮播容器（.carousel-inner）设置一个min-height，它就不会再跳了。

设置更符合您需求的值。

另外： Seam like 对图像有一点影响，所以每次图像改变时，它都会变小一点。如果你只是想避免所有网站跳转，使用我上面说的，如果你想改变 "change-of-size" 行为，你需要检查 class .next 和（可能）.right/.left 看看身高有没有变化。很难从实时网站检查它们，这就是为什么我告诉您从代码中检查这个 - 或者如果您愿意，可以上传代码。

Answer 2

覆盖 Bootstrap class。这将解决您的问题

.carousel-inner>.item {
          width: 100%;

}

Answer 3

我的 Carousel 问题与图片没有直接关系，而是图片中导致页面移动的内容。为了在页面的其他地方避免它，我只是使用 JQuery 来检测我是否滚动过我的轮播并让它暂停。我知道这是一种解决方法，但它很有效。

$(document).on("scroll",function(){
if($(document).scrollTop()>200){
    $('#slider').carousel('pause');
} else{
    $('#slider').carousel('cycle');
}});

Bootstrap 轮播 - 当图像改变时整个网站跳转

Bootstrap Carousel - Whole website jumps when image is changing

html

javascript

css

carousel

twitter-bootstrap-3