css - bootstrap4 中的 carousal control icon 设置不正确

Question

我在 bootstrap4 中创建了一个 slider ，但轮播控件未正确对齐。

这是我的代码:

.col-md-4 {
  display: inline-block;
  margin-left: -10px;
}

.col-md-4 img {
  width: 100%;
  height: auto;
}

body .carousel-control-prev-icon,
body .carousel-indicators li,
body .carousel-control-next-icon {
  background-color: #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">

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

    <!-- Indicators -->
    <ul class="carousel-indicators mb-0 pb-0">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner no-padding my-5">
      <div class="carousel-item active">
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300?text=1">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top rounded-bottom" src="http://via.placeholder.com/300x300?text=2">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top rounded-bottom" src="http://via.placeholder.com/300x300?text=3">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!
          </p>

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>

        </div>
      </div>
      <div class="carousel-item">
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>

        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <a href="#" onclick=abc(this) class="slider_info">
            <img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300">
            <div class="card-img-overlay t_img">
              <span class="float-left text-uppercase">article</span>
              <span class="float-right text-uppercase">2345 views</span>
            </div>
          </a>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!
          </p>

        </div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>

另请参阅此 CodePen
https://codepen.io/elsa1234/pen/RYEwWx?editors=1100

提前致谢

Answer 1

添加以下CSS

span.carousel-control-prev-icon {
 position: relative;
 bottom: 40px;
 right: 40px;
}

span.carousel-control-next-icon {
 position: relative;
 bottom: 40px;
}