Question

我试图制作一个只包含文字的旋转木马。旋转木马/滑块现在运行良好，它也有响应。现在我对指标的位置存在一些问题。

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

还有一些查询会更改指标，具体取决于分辨率，这就是为什么您需要在每个查询下使用上述值的原因。

对于底部指标，将底部边距添加到body标签，因为它们的位置是绝对的，所以你需要将它们推到底部：

body {
    margin-bottom: -50px;
}

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

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

Bootstrap Carousel仅限文本 - 指示器位置问题

1 个答案: