将轮播标题移到轮播外答案

【问题标题】：Move carousel caption outside carousel将轮播标题移到轮播外
【发布时间】：2019-05-26 12:29:02
【问题描述】：

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

如果有人可以帮助我，那就太好了。谢谢

OS: Mac

Browser: Chrome 74.0

Bootstrap version: 4.1.1

【问题讨论】：

您的 JSBIN 链接已损坏
@SASSY_ROG 请立即查看

标签： css twitter-bootstrap bootstrap-4 bootstrap-carousel

【解决方案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;
  }

【讨论】：

这仍然不能解决问题。父容器仍然不允许我将标题移到容器外
在这种情况下，将position: absolute添加到父容器中，并将.carousel-inner img切换为position: relative

【解决方案2】：

类carousel-inner 的元素具有以下由Bootstrap 设置的声明：overflow: hidden。它可以防止放置在其填充框之外的任何子元素可见。

为了防止这种行为，您需要使用：overflow: visible 覆盖该声明。然后，为了防止幻灯片在移动时显示，您需要将轮播包裹在另一个元素中，在该元素的底部添加一些填充以使标题可见（例如60px），并设置其@ 987654326@ 属性到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>

【讨论】：

这确实解决了问题，但我可以看到正在滑出的图像。
对，我在你的 JSBin 上看不到，因为轮播占据了整个宽度。我编辑了答案以防止出现该问题，希望对您有用。
问题依然存在。让我分享一个截屏视频
这里很难说是哪里出了问题，但也许容器元素的宽度比轮播元素大？它应该与轮播元素的宽度完全相同，并且没有水平填充。我无法重现这个问题，它在 JSBin 中运行良好，我的回答有所改变：jsbin.com/siyahukiji/1/edit?html,output