引导程序 4 轮播底部的 Div

Question

我试图在 bootstrap 4 carousel 的底部放置一个带有 4 个 fontawesome 图标的 div，但此时，div 就在菜单按钮附近。我想看起来像这样： 我已经设置了轮播，但我不知道如何将 div 放在那里。

这是 HTML：

<div id="home-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="<?php echo base_url('assets/images/slider1.jpg');?>" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
            <h2 class="animated bounceInRight to-deelay">Comanda Mancarea Ta Favorita</h2>
            <button class="btn btn-primary menu-button animated bounceInLeft to-deelay">Meniu</button>
            <div class="test-div">
                test
            </div>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="<?php echo base_url('assets/images/slider2.jpg');?>" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
            <h2 class="animated bounceInRight to-deelay">Comanda Mancarea Ta Favorita</h2>
            <button class="btn btn-primary menu-button animated bounceInLeft to-deelay">Meniu</button>
            <div class="test-div">
                test
            </div>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="<?php echo base_url('assets/images/slider3.jpg');?>" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
            <h2 class="animated bounceInRight to-deelay">Comanda Mancarea Ta Favorita</h2>
            <button class="btn btn-primary menu-button animated bounceInLeft to-deelay">Meniu</button>
            <div class="test-div">
                test
            </div>
        </div>
    </div>
</div>
<a class="carousel-control-prev" href="#home-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#home-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

这是 CSS：

    .carousel-caption{
    padding-bottom: 150px;
}
.carousel-caption h2{
    font-size: 50;
    text-transform: uppercase;
    padding-bottom: 100px;
}
.carousel-caption{
    color: black;
    font-size: 25px;
    font-weight: bold;
}
.to-deelay{
    animation-delay: 0.5s;
}
.menu-button{
    width: 160px;
    background-color: #C0B283;
    border: 0;
}
.carousel-caption button{
    text-align:center;
    background: linear-gradient(to right, #C0B283 50%,#DCD0C0 50%);
    background-size: 200% 100%;
    transition:all 1s ease;
}
.carousel-caption button:hover{
    background-position: right bottom;
}

.test-div{
    width: 70%;
    background-color: red;
    margin: 0 auto;
}

除此之外，将元素与轮播标题隔开的最佳方法是什么？

Answer 1

我会尝试一个答案让你开始。

因此，您希望将包含图标和文本的 div 放在您的 carousel-control-prev 元素上方。

所以 HTML 应该是这样的：

    <div class="icon-container">
        <div class="icon-1"> CONTENT </div>
        <div class="icon-2"> CONTENT </div>
        <div class="icon-3"> CONTENT </div>
        <div class="icon-4"> CONTENT </div>
    </div>
    <a class="carousel-control-prev" href="#home-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#home-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

您现在可以将icon-container div 绝对定位到轮播的底部。轮播的分页元素将采用类似的样式，但分别位于轮播的左侧和右侧。

所以容器的 CSS 应该类似于

.icon-container{
   position:absolute;
   width:100%;
   bottom:30px;
   left:0;
   right:0;
}

这应该将此 div 放置在轮播的底部。假设父母有一个position:relative; 属性。