Css 防止引导转盘标题重叠

因此，我试图利用引导转盘在页面上显示内容。问题是，调整浏览器大小时，标题与内容重叠。我试着把标题改成固定的，但这并不能解决问题。我想把标题放在内容的正下方，让它随内容流动，但我更喜欢放在底部。这样，当用户从一张幻灯片转到另一张幻灯片时，它始终处于同一位置。我试着用标题把内容放下来，但是内容通过浏览器的顶部。在观看第3张幻灯片时，您将看到大部分问题

HTML

我没有办法尝试了

---

更新：通过将内容包装为div高度设置为80%，并将标题移动到项目中，并将高度设置为20%，我可以使标题部分正常工作。我更新了上面的HTML和CSS。现在的问题是，指示器现在将与标题重叠。这有点棘手，因为一个旋转木马只有一组指示器，我不能像移动字幕一样将它们移动到每个项目中。

您尝试过为旋转木马字幕设置高度吗

.carousel-caption {
    max-height: 20%;
}

因为幻灯片内容的最大高度为80%，如果标题的高度超过20%，则最终将重叠

编辑以进行更新： 转盘指示器将重叠，因为它们与屏幕底部有设定的距离。由于未设置标题高度，而是总高度的一个百分比，因此指示器距离有可能大于标题高度。 是否尝试将标题高度设置为固定值

.slideCaption {
    height: 100px;
    color: #EFEFEF;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: purple;
}

---

谢谢，我试过了，但是指示器仍然会与标题重叠。问题是指标是位置：绝对的。旋转木马指标{bottom:0px}怎么样？这将确保指标尽可能低，从而给标题更多的空间。它适用于我拥有80%（内容）和20%（标题）的百分比。但是，对于其他时代来说，情况并非如此。我正在继续实验。

.carousel-caption {
    max-height: 20%;
}

.slideCaption {
    height: 100px;
    color: #EFEFEF;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: purple;
}