Question

有谁知道我怎么能更新bootstraps轮播按钮不能跨越轮播的整个高度？我只想让箭头存在并且可以点击，而不是旋转木马的整个右/左手区域。

非常感谢任何帮助。

Answer 1

您可以为css添加自定义样式以实现此目的。

首先，将特定宽度/高度设置为carousel-control元素，使其不会跨越轮播的整个高度。

.carousel-control {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
}

执行此操作后，箭头导航后面的背景图片可能看起来有点偏离，所以我可能也会隐藏它。

.carousel-control.left, 
.carousel-control.right {
    background-image: none;
}

最后一步是将它垂直放在你的旋转木马上。

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

看看这个小提琴我已经做了演示。 https://jsfiddle.net/swsalim/rx5zxd20/2/

如何使Bootstraps Carousel Prev / Next按钮不跨越旋转木马的整个高度？

1 个答案: