当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

bootstrap轮播图怎么居中

发布时间：2025/5/22 编程问答 41 豆豆

生活随笔收集整理的这篇文章主要介绍了 bootstrap轮播图怎么居中小编觉得挺不错的,现在分享给大家,帮大家做个参考.

bootstrap的轮播图代码直接用不修改的话，

容易出现以下情况：

很多人的解决办法就是把图片宽度设置为100%，但如果仅仅只是将图片设置为100%，则容易出现如下情况，整个轮播图填充了大部分页面，有时候这并不是我们想要的效果

解决办法就是先让为整个轮播块添加居中属性：class=‘container’；

效果如下：

如果整个轮播图默认居中后还是觉得占了大部分的页面想让整个轮播图占页面比例小些，可以给整个轮播块添加一个id，改变其CSS样式为70%或者其他百分比，只能改成百分比，千万不能改成有明确的宽度限制，如果不小心改成如800px的宽，则无法实现响应式，当窗口缩小后无法自适应。

<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>bootstrap轮播图</title><link href="css/bootstrap.min.css" rel="stylesheet"> <style> body {padding-top: 20px; } /* 自己自定义的id，区别bootstrap自带的id */ #abc {width: 70%; } #carousel-example-generic img{width: 100%; } </style> </head> <body> <div class="container" id="abc"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li> </ol><div class="carousel-inner" ><div class="item active"><img src="images/1.jpg" alt="..."></div><div class="item"><img src="images/2.jpg" alt="..."></div><div class="item"><img src="images/3.jpg" alt="..."></div><div class="item"><img src="images/4.jpg" alt="..."></div><div class="item"><img src="images/5.jpg" alt="..."></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div> </body> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </html>

转载于:https://www.cnblogs.com/kid2333/p/7513327.html

总结

以上是生活随笔为你收集整理的bootstrap轮播图怎么居中的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。