Bootstrap Carousel - 图像更改时整个网站跳转

Posted 2023-03-06

【中文标题】Bootstrap Carousel - 图像更改时整个网站跳转

【英文标题】：Bootstrap Carousel - Whole website jumps when image is changing

【发布时间】：2015-07-11 04:42:24

【问题描述】：

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

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

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

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

【问题讨论】：

给旋转木马设置一个固定的高度，这会出现这个错误

遗憾的是，当我设置固定高度时，它不再响应了。

【参考方案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 文件。但我认为更好的方法是在您的样式中使用媒体查询，而不是更改其他可能更新的文件，然后覆盖您的自定义样式