기본적으로 표시기는 하단에 있고 컨트롤은 각각 왼쪽과 오른쪽에 있습니다.
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!--/Carousel indicators-->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<h2>Item 1</h2>
</div>
<div class="item">
<h2>Item 2</h2>
</div>
<div class="item">
<h2>Item 3</h2>
</div>
<div class="item">
<h2>Item 4</h2>
</div>
</div>
<!--/Carousel items-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!--/Carousel nav-->
</div>
표시기와 함께 컨트롤을 표시하는 가장 좋은 방법은 무엇입니까? 내가 달성하고 싶은 것은 왼쪽 컨트롤을 표시기 왼쪽에 배치하고 오른쪽 컨트롤을 표시기 오른쪽에 배치하는 것입니다. 인라인, 동일한 높이, 수직 정렬.
캐 러셀 컨트롤은 백분율과 함께 수직으로 배치되고 캐 러셀 표시기는 픽셀과 함께 수직으로 배치되기 때문에 이것은 실제로 달성하기가 약간 까다로운 것입니다. 약간의 수정없이 하나 또는 다른 것을 변경할 수 없습니다. 가장 좋은 방법은 두 가지 모두에 대해 위치 비율을 사용하고 원하는대로 조정하는 것이지만 .carousel-control {height:20px}지표의 높이와 일치하도록 변경 해야합니다. 또한 쉐브론의 글꼴 크기가 태블릿에서 휴대폰 크기로 변경되는 것도 고려해야합니다. 이 때문에 @media 쿼리를 통해 세로 높이 비율도 변경해야합니다. 다음은 매우 간단한 CSS 변경 사항이 포함 된 바이올린의 대략적인 예입니다. 당연히 원하는대로 백분율로 조정할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다