仅引导轮播文本 - 指标位置问题答案

【问题标题】：Bootstrap Carousel Text only - issues with indicator position仅引导轮播文本 - 指标位置问题
【发布时间】：2018-02-11 14:58:44
【问题描述】：

我正在尝试制作一个只包含文字的轮播。旋转木马/滑块现在运行良好，而且反应灵敏。现在我对指标的位置有一些问题。

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

如您所见，指标在文本中。我怎样才能把它们放在文本下面。希望得到您的帮助

【问题讨论】：

我理解您为什么不希望箭头越过文本，但让它们出现在文本下方也会导致问题。也许考虑从侧面提供更多的填充物，这样箭头就可以放在那里？
感谢您的快速响应，但我的意思是旋转木马下的小点。
更新了我的答案，还有底部指标解决方案。

标签： css bootstrap-carousel

【解决方案1】：

如果您想从文本中删除侧边指示符，请将它们左右移动并留有边距。将此代码添加到您的 css 文件中：

.carousel-inner>.item {
    margin: 0 50px;
}

left carousel-control {
    margin-left: -15px;
}

right carousel-control {
    margin-right: -15px;
}

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

对于底部指示器，将底部边距添加到 body 标签，由于它们的位置是绝对的，您需要将它们推到底部：

body {
    margin-bottom: -50px;
}

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

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

【讨论】：

感谢您的快速响应。你解决了我的问题。