html - Bootstrap 工具提示在旋转木马图像的末尾剪切

Question

我有 Bootstrap 轮播，里面有一张图片，这张图片有一个工具提示，它被轮播图片左 Angular 的边缘切割。

Tooltip cut

工具提示文本和气泡在我的旋转木马图像的白色中被切割。

我的代码:

<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 在 carousel-inner 类上有 overflow: hidden 以防止在滑动时显示其他图像。

我认为你可以做两件事:

将其添加到 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');
})