Twitter 가로 열을 공유하는 부트 스트랩 회전 목마

Question

400x400 픽셀 인 회전식 캐 러셀을 설정하고 왼쪽에있는 다른 요소와 가로 행을 공유하고 싶습니다. 예를 들어, 아래 코드에서 span4 클래스와 회전식 캐 러셀을 포함하는 행 클래스가 있습니다. 그러나 네비게이션 컨트롤은 캐 러셀 이미지와 정렬되지 않습니다 (컨트롤은 캐 러셀로 오른쪽으로 이동하지 않고 대신 span4 클래스가있는 왼쪽에 남아 있습니다). 당신은 회전 목마에 span* 클래스를 사용하지 않을 경우

<div class="row"> 

    <div class="span4"> 
    <h2>Heading</h2> 
    <p>Some Text</p> 
    </div> 

    <div id="this-carousel-id" class="carousel slide" style="max-width: 400px"> 
    <div class="carousel-inner"> 
     <div class="item active"><img src="http://placehold.it/400x400" alt="" /> 
     </div> 
     <div class="item"><img src="http://placehold.it/400x400" alt="" /> 
     </div> 
    </div> 
    <!-- Carousel Controls --> 
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a> 
    </div> 

</div> 

Answer 1

, 당신은 회전 목마 <div>에 float: left 스타일을 추가해야합니다.

또는, bootstrap.css이 선택에 대한 [class*="span"]을 사용하기 때문에, 당신은 회전 목마 <div>에 span (또는 cspan-is-boring 같은 임의 뭔가) 클래스 등을 추가 할 수 있습니다.

JS Fiddle을 참조하십시오.