首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Bootstrap 3旋转木马滑动时滑梯下面的白色背景

Bootstrap 3旋转木马滑动时滑梯下面的白色背景
EN

Stack Overflow用户
提问于 2016-03-20 12:05:48
回答 2查看 1.5K关注 0票数 0

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

这是从哪里来的,我如何摆脱它?图像的大小各不相同。

EN

回答 2

Stack Overflow用户

发布于 2016-03-20 12:17:52

可能是旋转木马的默认背景颜色,也可能是.To下面的某个东西找到它的原点,尝试覆盖旋转木马或正文或html的背景颜色,或者可能是它下面的容器使用不同的背景颜色。

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

代码语言:javascript
运行
复制
height:100% ; or height:"100vh";

如果上面的方法不起作用,还可以为

/body元素

设置高度

票数 1
EN

Stack Overflow用户

发布于 2016-03-20 12:40:26

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

Carousel Fiddle

但是要让您的旋转木马工作,您需要像我前面提到的那样,将图像和它的parents containers高度设置为100%。如果你不想弄乱其中任何一个,你可以调整你的图片大小,使其与许多网页图片大小一致,你可以只需谷歌调整图片大小就可以找到一个。

希望这一切都能有所帮助

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36110121

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档