css - 格式化引导轮播布局

Question

我试图让引导轮播显示在轮播两侧的控制箭头上，因为默认情况下它们会重叠到图像中。

这是我要完成的示例：http: //jsfiddle.net/LHAB8/

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

[左箭头] [一次显示 4 个框的轮播] [右箭头]

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

但我无法使用引导网格系统进行定位以使其看起来正确 - 布局不需要响应。

任何人都可以帮忙吗？

Answer 1

您可以在 div.carousel 上添加填充

.carousel
{
    padding:10px 70px;
}

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

Answer 2

要执行此 hack，您可以修改引导 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 文档以获取更多事件