Bootstrap Carousel 插件图像对齐答案

【问题标题】：Bootstrap Carousel Plugin image alignmentBootstrap Carousel 插件图像对齐
【发布时间】：2019-07-15 16:00:46
【问题描述】：

reduce bottom image height我是学生，我正在尝试使用 Bootstrap Carousel 插件，并且正在使用 w3school 轮播示例 [https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h] 所以我需要增加底部高度 Carousel Image 按钮太低了，谁能帮我。我在下面附上了一张照片

这是我尝试过的代码

  <section id="intro" class="clearfix" style="
      padding: 80px 0 60px 0;
      padding-top: 80px;
      padding-right: 0px;
      padding-bottom: 60px;
      padding-left: 0px;
  ">
          <div class="container d-flex h-100">

        <div id="myCarousel" class="carousel slide" data-ride="carousel">

          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>


          <div class="carousel-inner">
            <div class="item active">
              <img src="img/dog2.jpg" alt="Los Angeles"  class="img-fluid" alt="Responsive image">
            </div>

            <div class="item">
              <img src="img/duffy-brook-350228-2000x1333.jpg" alt="Chicago"  class="img-fluid" alt="Responsive image">
            </div>

            <div class="item">
              <img src="img/dog2.jpg" alt="New york"  class="img-fluid" alt="Responsive image">
            </div>
          </div>


          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
</section>

【问题讨论】：

请贴出您尝试过的代码。 stackoverflow.com/help/how-to-ask

标签： css twitter-bootstrap

【解决方案1】：

你需要将top:50%添加到carousel-indicators

.carousel-indicators {
  top: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container">
    <h2>Carousel Example</h2>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

</body>

</html>

如果您想降低carousel的高度，您可以根据您的要求指定height

.carousel-inner {
  height: 50vh!important
}

 .carousel-inner .item.active,
.carousel-inner .item {
  height: 50vh!important;
}

.item img {
  object-fit: cover;
  width: 100%!important;
  height: 100% !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container">
    <h2>Carousel Example</h2>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
        </div>
      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

</body>

</html>

【讨论】：

他们说按钮太高了不是吗？
根据我的假设，根据他的形象，他需要carousel-indicators 在中心。我不清楚他的问题
谢谢，我也需要降低底部高度，你能帮帮我吗[i.stack.imgur.com/ACLCG.jpg]
@shivmysuru 请检查我的第二个 sn-p。做过同样的事情
@SaiManoj 谢谢，它对我有用。但在 移动视图 中，按钮会从图像上移开（响应式视图）

【解决方案2】：

你的ol 有bottom: 10px;

改变bottom属性的值来改变垂直位置

添加以下 CSS

CSS

ol.carousel-indicators {
  bottom: 0;
}

HTML

<ol style="bottom: 0;" class="carousel-indicators">

参见示例here

【讨论】：

，只有按钮移动到顶部，我还需要调整图像高度。它们之间有一个高度（巨大的空间）。请查看此图片链接 [i.stack.imgur.com/afUsd.png]。图片需要缩小
@shivmysuru 您可以在我的回答中使用top 而不是bottom 来实现这一点，请考虑查看您的问题，问题似乎与图片不匹配
谢谢，我也需要降低底部高度，你能帮帮我吗[i.stack.imgur.com/ACLCG.jpg]

【解决方案3】：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container">
    <h2>Carousel Example</h2>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
     

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
        </div>
      </div>
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

</body>

</html>

【讨论】：