bootstrap轮播图怎么居中

最新推荐文章于 2023-12-01 16:53:45 发布

转载最新推荐文章于 2023-12-01 16:53:45 发布 · 7.8k 阅读

17 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kid2333/p/7513327.html

文章标签：

#javascript #前端 #ViewUI

本文介绍如何优化Bootstrap轮播图的显示效果，通过调整CSS样式使其居中并对宽度进行限制，确保不同屏幕尺寸下的良好体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>