bootstrap轮播图怎么居中
生活随笔
收集整理的這篇文章主要介紹了
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"><!-- Indicators 按鈕圓圈部分 --><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><!-- Wrapper for slides 圖片部分--><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><!-- Controls 上一頁下一頁部分--><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轮播图怎么居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国出口印度化妆品数据哪儿有
- 下一篇： 万王之王3D传说武器怎么选择?传说武器选