将旋转木马的标题移到旋转木马外

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属性设置为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>