Css 引导4转盘底部的Div

我试图将一个带有4个图标的div放在bootstrap 4旋转木马的底部，但此时，div it就在菜单按钮附近。我希望如下所示： 我把旋转木马都安装好了，但我不知道怎么把潜水舱放在下面

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

---

除此之外，从旋转木马标题中分隔元素的最佳方式是什么？

我将尝试一个答案让您开始

因此，您需要将包含图标和文本的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>

---

这应该将该div定位在旋转木马的底部。假设父对象有一个位置：相对位置；属性。

我将尝试一个答案让您开始

因此，您需要将包含图标和文本的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>

---

这应该将该div定位在旋转木马的底部。假设父对象有一个位置：相对位置；属性。

向内看，特别是对齐允许垂直间距和对齐的项目。它们对这样的东西非常有用。如果你想将div与图标放在一起，请特别注意对齐项目，允许垂直间距和对齐。它们对这样的东西真的很有用。你想把div放在哪里？谢谢！我需要居中，所以我使用右：0；左：0；，但是这件衣服很好！哦，是的！当然这是对的：0；左：0；'我很抱歉，今天晚些时候…这会很好的。但就个人而言，不使用flex内置的bootstrap似乎很遗憾。这是一个好主意！如果有机会，我会更新我的答案，并将其作为备选答案。谢谢！我需要居中，所以我使用右：0；左：0；，但是这件衣服很好！哦，是的！当然这是对的：0；左：0；'我很抱歉，今天晚些时候…这会很好的。但就个人而言，不使用flex内置的bootstrap似乎很遗憾。这是一个好主意！如果有机会，我会更新我的答案，并将其作为备选答案。

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