Форматирование компоновки карусели бутстрапа

Question

Я пытаюсь отобразить карусель начальной загрузки с помощью стрелок управления с каждой стороны карусели, поскольку по умолчанию они перекрываются с изображениями.

Вот пример того, где я до: http://jsfiddle.net/LHAB8/

В идеале я хотел бы, чтобы она выглядела как

[Стрелка влево] [Карусель с 4 коробки, показывая в то время] [Right Arrow]

<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> 

, но я не могу получить positoning используя бутстрэпами подвесную систему, чтобы выглядеть правильно - макет не должен быть отзывчивым.

Может ли кто-нибудь помочь?

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 для нескольких событий