부트 스트랩을 만드는 방법 회전 장치 이전/다음 단추가 회전 장치의 전체 높이에 걸쳐 있지 않습니까?

Question

내가 캐롤젤의 전체 높이를 차지하지 않도록 부트 스트랩 캐 러셀 버튼을 업데이트하는 방법을 아는 사람이 있습니까? 나는 컨베이어의 오른쪽/왼손 부분 전체가 아니라 화살표를 표시하고 클릭 할 수 있기를 바랍니다.

도움을 주시면 감사하겠습니다.

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/