Bootstrap 4.1.1 CSS輪播滑塊箭頭對齊

Question

如何在Bootstrap 4.1.1中從屏幕的左端和右端排列輪播控制箭頭？ 我嘗試了以下代碼，但是沒有用。

.carousel-control .icon-prev{
  left: 5px
}
.carousel-control .icon-next{
  right: 5px
}

這是我關於旋轉木馬的HTML代碼。

<div id="slider3" class="carousel slide mb-5 carousel-fade" data-ride="carousel">
            <ol class="carousel-indicators">
            <li class="active" data-target="#slider3" data-slide-to="0"></li>
            <li data-target="#slider3" data-slide-to="1"></li>
            <li data-target="#slider3" data-slide-to="2"></li>
            <li data-target="#slider3" data-slide-to="3"></li>
            <li data-target="#slider3" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="img/car1.jpg" alt="First Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="img/car2.jpg" alt="Second Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="img/car3.jpg" alt="Third Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="img/car2.jpg" alt="Fourth Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="img/car3.jpg" alt="Fifth Slide">
            </div>
            </div>

            <!-- CONTROLS -->
            <a href="#slider3" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            </a>

            <a href="#slider3" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
            </a> 
        </div>

Answer 1

嘗試以下代碼，您當前的方法也不錯，但確實很昂貴：

.carousel-control-next, 
.carousel-control-prev {
    width:20px;
}

說明：您試圖調整next prev按鈕的內部元素。 但是button是帶有align-items:center flex圖標容器，這就是為什么它不應用.carousel-control .icon-prev位置的原因。