将轮播字幕移到轮播外

Question

我正在尝试将标题移至左侧，但问题不起作用。每当它移出其父容器时，它就会停止显示。有人可以帮我吗。这是一个JS bin链接-> JSBin

如果有人能帮助我，那将是很棒的。谢谢

OS: Mac

Browser: Chrome 74.0

Bootstrap version: 4.1.1

Answer 1

具有类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>

Answer 2

设置相对于图像的标题：

  .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;
  }