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

时间:2018-02-11 14:58:45

标签: css bootstrap-carousel

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

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

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

1 个答案:

答案 0 :(得分: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/