bootstrap轮播图怎么居中

时间 2019-11-17

原文原文链接

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

容易出现如下状况：html

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

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

效果以下：app

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

<!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>