如何製作引導傳送帶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/