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

Bootstrap 3 carousel white background underneath slide when sliding

本文关键字：幻灯片 白色 背景 Bootstrap 旋转木马      更新时间：2023-09-26

我在我的网站上使用了最新版本的Bootstrap。每次轮播滑动时，幻灯片图像下方都会显示白色背景。

这是从哪里来的，我该如何摆脱它？图像大小不同。

可能是轮播的默认背景颜色或下面的内容。
要找到它的起源，请尝试覆盖轮播或正文或html的背景颜色，或者可能是其下方的容器具有不同的背景颜色。

为了避免将图像的高度更改为 

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

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

您需要将

图片的高度设置为 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，然后将其设置为百分比。 然后弄乱这个底部填充百分比以获得您想要的高度。 然后将每个项目设置为具有背景图像。 这是您可能想看的小提琴

旋转木马小提琴

但是要让您的轮播正常工作，您需要按照我之前所说的方式进行操作，并将图像和它的父容器高度设置为 100%。 如果您不想弄乱其中任何一个，您可以使用许多网络图像调整器将图像大小调整为相同的大小，您只需谷歌调整图像大小即可找到一个。

希望这一切都有所帮助

相关文章：