如何制作引导传送带Prev/Next按钮不能跨越传送带的整个高度？

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/