我懂你碰到的这个糟心问题——把轮播控件挪到图片外侧后，鼠标刚碰到控件它就消失了。核心原因是Bootstrap默认的轮播控件显示逻辑是只有鼠标悬停在.carousel容器上时，控件才会显示，但当你把控件定位到容器外面后，鼠标移到控件上时其实已经脱离了.carousel的hover范围，控件就会立刻变回隐藏状态。

下面给你两个实用的修复方案：

方案1：修改控件的透明度触发条件 #

直接覆盖Bootstrap的默认样式，让控件在自身被hover时也保持可见：

/* 覆盖Bootstrap默认的控件透明度样式 */
.carousel-control-prev, .carousel-control-next {
  opacity: 0;
  /* 可选：添加过渡动画，让显示/隐藏更平滑 */
  transition: opacity 0.2s ease;
}

/* 当轮播容器hover，或者控件自身hover时，都显示控件 */
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next,
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

这个方案最简单直接，不需要改动HTML结构，只调整CSS就能解决问题。

方案2：扩大轮播容器的hover范围（可选） #

如果你的轮播容器本身比图片小，也可以给.carousel添加内边距，让容器范围覆盖到控件的位置，这样鼠标悬停控件时依然处于容器的hover范围内：

.carousel {
  background: #F5F5F5;
  /* 根据控件的位置添加左右内边距，确保容器范围覆盖控件 */
  padding-left: 60px;
  padding-right: 60px;
  position: relative;
}

/* 调整控件的定位，相对于扩大后的容器 */
.carousel-control-prev {
  left: 0;
}
.carousel-control-next {
  right: 0;
}

这个方案适合希望保持Bootstrap原有hover逻辑的情况，通过扩大容器范围适配控件位置。

另外要确认你的Font Awesome图标能正常显示，如果图标不出来，检查一下Font Awesome的引入是否正确哦。你的初始化脚本是没问题的：

$('.carousel').carousel()

内容的提问来源于stack exchange，提问作者mlegg