解析&解决BootStrap5在轮播图（carousel）中使用下拉框（dropdown）鼠标悬浮栏目元素时，下拉框突然消失的问题

因版权原因，无法放图。

事情是这样的。因为项目中的轮播图在页面顶部，并且导航栏也需要在轮播图整个元素的顶部，而.carousel盒子内的元素使用了绝对定位，内部所有元素都没有在顶部定位，所以我直接将导航栏放到.carousel类（轮播图类）的盒子下了，并给了它一个顶部定位。

同时，项目要求鼠标悬浮在导航栏的元素上时出现下拉框，于是我就使用了.dropdown类。原本该类需要点击激活，只需要添加一点CSS代码覆盖原先的即可。

/* 鼠标悬浮在元素上时出现下拉框 */
li:hover .dropdown-menu {
	display: block;
}

这个轮播图包含导航栏.nav类，左右翻页按钮.carousel-control-prev{next}，底部切换页面按钮.carousel-indicators，以及核心的图片内容.carousel-inner。

基本的框架搭建完后，开始实现下拉框的功能，无非就是给.nav-item类的<li>元素再增加一个.dropdown类，li里再套一个ul>li。

好了，问题出现了。

问题：当鼠标悬浮到导航栏的元素上会出现下拉框，但鼠标在下拉框里移动时，鼠标明明还在框内，框会莫名消失。

在网上搜寻了一会无果，当我打开F12控制台检查时也没什么头绪，无奈只有先把所有下拉框一起实现，再来找它们消失的共同规律。

欸！还真给找到了！

我发现所有下拉框的上部分元素，无论鼠标如何移动，只要在框内，这个框就绝不会消失。当所有下拉框超过一定高度位置，鼠标悬浮到了超出的高度范围中，它就消失了。

突然想起来bootstrap的底层逻辑是媒体查询，于是我就放大&缩小窗口再进行多次调试。果然根据窗口的大小，消失的高度不一致。于是又纳闷了一会儿...

当我乱点翻页按钮之际，猛然醒悟！莫非就是这些按钮造成的。

原因：出现下拉框消失是因为鼠标悬浮位置到了.carousel-indicators轮播图下方按钮类上，.carousel-indicators类的宽度默认较长，即鼠标所在的位置，既是下拉框的位置，也是按钮的位置。.carousel-indicators的按钮有关代码阻挡了下拉框显示的代码，最底层应该跟渲染方式的进程相关。

因为作者还未学到js代码的框架内容，暂且不做深究。

解决方案：给.carousel-indicators类重新设置一个宽度较少的属性，或者将其往更下方定位。

/*使用调整长度的方法解决问题*/

/* 使用.container优先级提升覆盖 */
.container .carousel-indicators{
	width: 150px;
	margin: 0 auto;
}
/*或*/
/* 使用.container-fluid优先级提升覆盖 */
.container-fluid .carousel-indicators{
	width: 150px;
	margin: 0 auto;
}

/* 长度请根据需要自行调整 */