滑动时,滑动下方的Bootstrap 3旋转木马白色背景

时间:2016-03-20 04:05:48

标签: javascript jquery html css twitter-bootstrap

我在我的网站上使用最新版本的Bootstrap。每次旋转木马滑动时,幻灯片图像下方都会出现白色背景。

这是从哪里来的,如何摆脱它?图像尺寸不同。

2 个答案:

答案 0 :(得分:1)

  

可以是旋转木马的默认背景颜色或下面的东西。   
要找到它的起源,请尝试覆盖旋转木马或身体或html的背景颜色,或者可以使用不同的背景颜色在其下方的容器。

     

避免将图像的高度更改为

height:100% ; or height:"100vh";
  

如果上述方法不起作用,还要设置html / body元素的高度

答案 1 :(得分:1)

您需要将图像的高度设置为100%,以便覆盖轮播容器的整个高度。要做到这一点,你必须将所有图像父容器设置为100%,同时你必须给你的.carousel一个特定的高度。因此,您必须将.carousel设置为高度:500px,然后将.carousel-inner.item.item img全部设置为height: 100%;。如果你想保留图像的分辨率,那么你可以摆脱图像标签,并给每个幻灯片另一个类,例如。 .slide-one.slide-two.slide-three等。然后,您可以为这些类中的每个类提供背景图像并将其设置为覆盖,但您仍需将旋转木马高度设置为特定高度,然后将.carousel-inner.item设置为height: 100% 。这是一个示例小提琴,我向人们展示了他们的旋转木马真正的反应。它使用填充底部.carousel-item,然后将其设置为百分比。然后弄乱这个填充底部百分比以获得所需的高度。然后将每个项目设置为具有背景图像。这是你可能想要看的小提琴

Carousel Fiddle

但是为了让你的旋转木马工作,你需要按照我之前的说法进行操作并设置图像,并将它的父母容器高度设置为100%。如果您不想搞砸其中任何一个,您可以将图片大小调整到与所有网页图像缩放器相同的大小,您只需谷歌调整大小图像即可找到一个。

希望这一切都有帮助