将静态垂直和水平居中的标题（或其他内容）添加到 Bootstrap 4 的轮播

Question

除了 Bootstrap 4 的旋转木马元素使用的标准标题之外，我还想以响应方式在 full-screen 旋转木马上覆盖静态标题（或其他内容）。我找到了解决方案（例如这个）涉及绝对定位 div 并为 top 指定一个值（例如 30%），但是这只有在您知道高度时才有效提前的静态字幕。

我已经能够部分实现如下...

html:

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        ...
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="h-100 w-100 static-caption">
            <div class="d-flex text-center h-100">
                <div class="my-auto w-100 ">
                    <h1>Static caption here</h1>
                </div>
            </div>
        </div>
        <div class="carousel-item active" style="background-image: url('image.jpg');">
            <div class="carousel-caption d-none d-md-block">
                <h2 class="display-4">First Slide</h2>
                <p class="lead">This is a description for the first slide.</p>
            </div>
        </div>
        ...
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon"></span></a>
</div>

css:

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.static-caption {
    position:absolute;
    z-index:1;
    pointer-events:none;
}

但是，这感觉有点老套（尤其是 z-index:1）并且完全覆盖了旋转木马，因此无法单击控件（因此 pointer-events:none）。它也是宽度的 100%，因此文本与 left/right 控件重叠。减小宽度可使叠加层保持左对齐而不是居中。

Answer 1

你能试试下面的代码，其中你的标题 class 是 carousel-caption

.carousel-caption {
  width: 50%; height: 50%; left:25%; top:25%
}

**问题已通过上面的代码片段解决。

将静态垂直和水平居中的标题（或其他内容）添加到 Bootstrap 4 的轮播

Add static vertically and horizontally centred caption (or other content) to Bootstrap 4's Carousel

carousel

bootstrap-4