css - Bootstrap Carousel Text only - 指示器位置问题

Question

我正在尝试制作一个只有文本的旋转木马。旋转木马/ slider 现在运行良好并且响应迅速。现在我对指示器的位置有一些疑问。

这是 a 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;
}

还有一些查询，它会根据分辨率更改指标，这就是为什么您需要在每个查询下使用上面的值。

对于底部指示器，将 bottom-margin 添加到 body 标签，因为它们的位置是绝对的，所以您需要将它们推到更底部:

body {
    margin-bottom: -50px;
}

.carousel-indicators {
    bottom: -30px;
}

这是一个更新的元素: https://jsfiddle.net/ydf5uuLm/4/