Twitter Bootstrap旋轉木馬共享一個水平行

Question

我想設置一個400x400像素的旋轉木馬，並與剩下的另一個元素共享水平行。例如，我有行類，其中包含一個span4類，然後在下面的代碼中傳送帶。但是，導航控件未與傳送帶圖像對齊（控件不會與傳送帶一起移到右側，而是保留在span4類的左側）。

<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

如果你不打算使用span*類轉盤上，你需要一個float: left樣式添加至轉盤<div>。

或者，因爲bootstrap.css使用[class*="span"]它的選擇，你可以只添加span（或任意的東西像cspan-is-boring）作爲一類旋轉木馬<div>。

請參閱JS Fiddle。