Переместить заголовок карусели за пределы карусели

Question

Я пытаюсь переместить заголовок за пределы левого края, но проблема не работает.Всякий раз, когда он выходит за пределы родительского контейнера, он перестает отображаться.Может кто-нибудь, пожалуйста, помогите мне.Вот ссылка на JS bin -> JSBin

Было бы здорово, если бы кто-нибудь смог мне помочь.Спасибо

OS: Mac

Browser: Chrome 74.0

Bootstrap version: 4.1.1

Answer 1

Установить подпись относительно изображения:

  .carousel-inner img {
      width: 100%;
      height: 100%;
      position: absoloute;
  }


  .carousel-caption {
    color: #000;
    position: relative;
    float: left;
    left: 0;
    margin-left: 30px;
    margin-top: 30px;
  }

Answer 2

Элемент с классом carousel-inner имеет следующее объявление, установленное Bootstrap: overflow: hidden.Он предотвращает видимость любого из его дочерних элементов, размещенных вне его поля заполнения.

Чтобы предотвратить такое поведение, вам необходимо переопределить это объявление с помощью: overflow: visible.Затем, чтобы избежать показа слайдов при перемещении, вам нужно обернуть карусель внутри другого элемента, добавить отступы внизу этого элемента, чтобы заголовок был видимым (например, 60px), и установите его overflow property to hidden.

Так что вам нужно добавить следующий код в ваш CSS:

.carousel-container {
  padding: 0 0 60px 0;
  overflow: hidden;
}

.carousel-inner {
  overflow: visible;
}

<div class="carousel-container">
  <div class="carousel">
    <!-- The code of the carousel -->
  </div>
</div>