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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。