Добавьте статический заголовок с вертикальной и горизонтальной ориентацией (или другой контент) в Карусель Bootstrap 4 - PullRequest
Новая
       42

Добавьте статический заголовок с вертикальной и горизонтальной ориентацией (или другой контент) в Карусель Bootstrap 4

0 голосов
/ 11 декабря 2019

В дополнение к стандартным заголовкам, используемым элементом карусели Bootstrap 4, я бы хотел наложить статический заголовок (или другой контент) адаптивно поверх полноэкранной карусели. Я нашел решения (такие как это) для этого, которые включают в себя абсолютное позиционирование 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% ширины, поэтому текст накладывается на левый / правый элементы управления. При уменьшении ширины оверлей остается выровненным по левому краю, а не по центру.

1 Ответ

0 голосов
/ 11 декабря 2019

Можете ли вы попробовать следующий код, где класс вашей подписи равен carousel-caption

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

** Проблема решена с помощью приведенного выше фрагмента кода.

...