格式Bootstrap旋轉木馬布局

Question

我試圖讓自舉旋轉木馬顯示旋轉木馬兩側的控制箭頭，因爲默認情況下它們重疊到圖像中。

這裏是我到那裏的例子：http://jsfiddle.net/LHAB8/

理想我想它看起來像

[左箭頭] [輪播與4盒一次顯示] [右箭頭]

<div class="span2"> 
    <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> 
</div> 
<div class="carousel slide span8" id="myCarousel"> 
    ... 
</div> 
<div class="span2"> 
    <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> 
</div> 

但我不能使用bootstraps網格系統看正確 - 佈局不需要響應。

任何人都可以幫忙嗎？

Answer 1

您只需添加填充在div.carousel

.carousel 
{ 
    padding:10px 70px; 
} 

http://jsfiddle.net/LHAB8/1/

Answer 2

要做到這一點的黑客，你可以修改引導CSS或補充一點：

的Html

<a href="my-control left">Left</a> 
<a href="my-control right">Right</a> 

JQuery的

$('.carousel-control').hide(); 
$('.my-control').click(function(e) 
{ 
    e.preventDefault(); 
    if($(this).hasClass('left')) 
     $('#myCarousel').carousel('prev'); 
    else if($(this).hasClass('right')) 
     $('#myCarousel').carousel('next'); 
}); 

檢查Bootstrap Docs更多事件