Question

我正在尝试使用旋转木马两侧的控制箭头显示自举轮播，因为默认情况下它们会重叠到图像中。

理想情况下，我希望它看起来像

[向左箭头] [一次显示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

要做到这一点，您可以修改bootstrap 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了解更多活动

格式化Bootstrap轮播布局

2 个答案: