Question

我有Bootstrap旋转木马，里面有一个图像，这个图像有一个工具提示，被旋转木马图像左边的边缘切割。

工具提示文字和气泡在我的轮播图像的白色处剪切。

我的代码：

<div class="carousel-inner">
        <div class="item active">
<div class="image-cropper">
<img data-src="<?=$match[$i]->champImage?>" class="img img-rounded centered"
 alt="<?=$match[$i]->champName?>" style="margin-right:10px;"/>
 </div>
<div class="carousel-leftCaption">
            <img class="img-circle" src="<?=$lol->itemImage($match[$i]->item1['itemId'])?>" data-toggle="tooltip" title="<?=$match[$i]->item1['name']?>
            <?=$match[$i]->item1['description']?>">
            <img class="img-circle" src="<?=$lol->itemImage($match[$i]->item2['itemId'])?>" data-toggle="tooltip" title="<?=$match[$i]->item2['name']?>">
            <img class="img-circle" src="<?=$lol->itemImage($match[$i]->item3['itemId'])?>" data-toggle="tooltip" title="<?=$match[$i]->item3['name']?>"><br/>
            <img class="img-circle" src="<?=$lol->itemImage($match[$i]->item4['itemId'])?>" data-toggle="tooltip" title="<?=$match[$i]->item4['name']?>">
            <img class="img-circle" src="<?=$lol->itemImage($match[$i]->item5['itemId'])?>" data-toggle="tooltip" title="<?=$match[$i]->item5['name']?>">
            <img class="img-circle" src="<?=$lol->itemImage($match[$i]->item6['itemId'])?>" data-toggle="tooltip" title="<?=$match[$i]->item6['name']?>">
           </div>

有什么方法可以解决这个问题吗？

Answer 1

这是因为默认情况下Bootatrap在overflow: hidden类上有carousel-inner，以防止在滑动时显示其他图像。

我认为你可以做两件事：

将此添加到CSS（在Bootstrap样式之后）：

.carousel-inner {
  overflow: visible;
}
.overflow-hidden {
  overflow: hidden;
}

添加此jQuery代码（以防止在滑动期间显示其他图像）：

$('#yourCarousel').on('slide.bs.carousel', function () {
  $(this).find('.carousel-inner').addClass('overflow-hidden');
});

$('#yourCarousel').on('slid.bs.carousel', function () {
  $(this).find('.carousel-inner').removeClass('overflow-hidden');
})

Answer 2

这是因为内置的css规则：

overflow: hidden;

您可以添加以下css：

.carousel-inner {
   overflow: visible;
}

...但它会使所有幻灯片都可见，因此您无法管理它。

Bootstrap工具提示在旋转木马图像结束时切割

2 个答案: