【问题标题】:Bootstrap Carousel - Whole website jumps when image is changingBootstrap Carousel - 图像更改时整个网站跳转
【发布时间】:2015-07-11 04:42:24
【问题描述】:

嘿可爱的 StackOverflow 社区。​​p>

我的网站有问题。我从 getbootrap.com 添加了 Bootstrap Carousel,它实际上运行良好。但是有一个问题。每次图像切换时,我的整个网站都会上下波动。

我不知道可能是什么问题,因为我没有更改 getbootstrap.com 的代码:-/

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

【问题讨论】:

  • 给旋转木马设置一个固定的高度,这会出现这个错误
  • 遗憾的是,当我设置固定高度时,它不再响应了。

标签: javascript html css twitter-bootstrap-3 carousel


【解决方案1】:

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

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

}

【讨论】:

  • 嘿,谢谢!使用您的解决方案,我没有黑条,但还有另一个问题。现在图像看起来被压扁了,当我让浏览器更小时:-/
  • 就是这样!你真是个天才! - 可悲的是我不能给你一个赞成票,因为我必须减少声誉,但非常感谢! :D
  • 奇怪的是,这么简单的东西解决了一个烦人的问题。谢谢!
【解决方案2】:

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

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

【讨论】:

    【解决方案3】:

    这是因为它改变了轮播项目上的一些类。 您可以将min-height 设置为轮播容器(.carousel-inner),它不会再跳转了。

    设置更适合您需求的值。

    另外: 像接缝一样对图像有一点影响,所以每次图像变化时,它都会变小一点。如果您只是想避免所有网站跳转,请使用我上面所说的,如果您想更改“更改大小”的行为,您需要检查类 .next 和(可能).right/.left 并查看如果身高有变化。很难从实时网站上检查它们,这就是为什么我告诉你从代码中检查 - 或者如果你愿意,可以上传代码。

    【讨论】:

    • 嘿,谢谢!它可以工作,但是当我使浏览器更小时,图像下方有一个大黑条。 - 我在哪里可以找到“下一个”课程?在 bootstrap-min.css 中?
    • 要解决响应性问题,只需使用一些媒体查询来更改您为 .carousel-container 设置的高度。在此之后,它应该按预期工作。对于 .next 类,请尝试插件 css 文件。但我认为更好的方法是在您的样式中使用媒体查询,而不是更改其他可能更新的文件,然后覆盖您的自定义样式
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-03
    • 2016-05-08
    • 2018-12-30
    • 1970-01-01
    相关资源
    最近更新 更多