Question

如何在Bootstrap 4.1.1中从屏幕的左，右两端排列轮播控制箭头？我尝试了以下代码，但是没有用。

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

这是我关于旋转木马的HTML代码。

{{1}}

Answer 1

尝试以下代码，您当前的方法也不错但确实很昂贵：

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

说明：您尝试调整next prev按钮的内部元素。但是button是带有flex和align-items:center的图标容器，这就是为什么它不应用您的.carousel-control .icon-prev位置。

Bootstrap 4.1.1 CSS轮播滑块箭头对齐

1 个答案: