Question

我正试图在引导4转盘的底部放置一个带有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

我会尝试一个让你入门的答案。

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

因此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;属性。

Div位于bootstrap 4 carousel的底部

1 个答案: