我将如何在 ASP.NET 中的 Bootstrap Carousel 上放置持久横幅

问题描述

<div style="max-height:400px;">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="max-height:400px;">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="~/Images/slide1.jpg" alt="First slide" style="max-height:400px;">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="~/Images/slide2.jpg" alt="Second slide" style="max-height:400px;">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="~/Images/slide3.jpg" alt="Third slide" style="max-height:400px;">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

解决方法

您可以在横幅上使用 position: absolute;z-index: 1;，并使用 margin 更改位置。这是一个工作演示：

  <div style="max-height:400px;">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="max-height:400px;">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="~/Images/slide1.jpg" alt="First slide" style="max-height:400px;">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="~/Images/slide2.jpg" alt="Second slide" style="max-height:400px;">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="~/Images/slide3.jpg" alt="Third slide" style="max-height:400px;">
                </div>
            </div>
             <div class="banner">
                <h5>banner</h5>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
<style>
    .banner {
        background-color: black;
        color: white;
        height: 50px;
        text-align: center;
        margin-top: -50px;
        position: absolute;
        z-index: 1;
        width:100%;
    }
    
    
</style>

结果：