Bootstrap Carousel文本 - 指示位置的问题

Question

我正在尝试制作带有文字的轮播。旋转木马/滑块现在运行良好，而且反应迅速。现在，我在指标的位置遇到了一些问题。

这是一个JSFIDDLE和我的CSS代码。希望你能帮我

#about .carousel-control{
  color: #2db4a0;
  background-image: none;
}
#about .carousel-indicators li{
  border: none;
  background-color: #424242;
}
#about .carousel-indicators .active{
  background-color: #2DB4A0;
}

如您所见，指示器在文本中。我该如何将它们放在文本下。我希望您的帮助

Answer 1

如果您想从文本中删除侧面指示器，请以边距向左和向右移动它们。将此代码添加到您的CSS文件：

.carousel-inner>.item {
    margin: 0 50px;
}
left carousel-control {
    margin-left: -15px;
}
right carousel-control {
    margin-right: -15px;
}

也有查询，这些查询会更改指标取决于分辨率，这就是为什么您需要在每个查询下使用上面的值播放。

对于底部指示器，将底部添加到身体标签中，并且由于其位置是绝对的，因此您需要将它们推更多底部：

body {
    margin-bottom: -50px;
}
.carousel-indicators {
    bottom: -30px;
}

这是一个更新的项目：https://jsfiddle.net/ydf5uulm/4/