html - 我正在尝试将轮播字幕置于顶部，但无法正常工作

我试图将轮播字幕放置在顶部，但它无法正常工作，我还希望背景具有100％的宽度（我希望它填满它放置的整个行，我不希望它成为限于文字宽度大小）

这是我的html代码

<div class="carousel-caption">
<h4><span class="caption-style"> Caption goes here</span></h4>
</div>

这是我的CSS样式

.caption-style {
    color:   white !important;
    background: rgba(0, 0, 0, 0.5);
    display:block;
    padding-top: 15px;
    padding-bottom: 15px;
    top: 0;
    bottom: auto;
    width:100%;
}

最佳答案

对于轮播字幕顶部，

您可以通过使用margin-top来使用您的最大尺寸

.carousel-caption {
    margin-top: -2em;
}

或者你可以使用

.carousel-caption {
        top: 0;
    }