Bootstrap v4.3.1下拉项hover高亮溢出边界该如何解决？

下拉项hover高亮溢出问题修复 #

该问题不属于Bootstrap原生BUG，核心原因是代码中类名使用冲突：dropdown-item 本身已经自带适配下拉菜单的内边距、交互样式，不需要额外叠加 nav-link 类，两个类的左右内边距叠加后，结合width: 100%规则，盒模型计算的总宽度超过父容器宽度，最终出现高亮溢出。

推荐按优先级选择以下修复方案，不需要修改Bootstrap源码：

• 方案1：直接移除所有dropdown-item元素上的nav-link类即可，原生dropdown-item已经满足下拉菜单项的样式需求。
• 方案2：如果必须保留nav-link类，在项目的自定义CSS文件中添加如下规则即可，注意要保证自定义CSS的引入顺序在bootstrap.css之后，才能覆盖默认规则：

.dropdown-menu .dropdown-item {
  box-sizing: border-box;
  /* 若上述规则仍未解决，可再加下面一行 */
  /* width: auto !important; */
}

之前修改操作不生效的原因说明：

• 直接修改bootstrap.css未生效：一般是浏览器缓存了旧的CSS文件，或是修改的CSS文件并非项目实际加载的文件
• jQuery修改未生效：设置width: ""等于清空行内width属性，并没有覆盖原有CSS规则；如果JS执行时机早于DOM渲染完成，也无法命中目标元素。

.scss样式来源说明 #

你看到的不存在的.scss文件是Bootstrap的源映射（Source Map）功能导致的：Bootstrap官方编译后的CSS文件末尾默认会携带/*# sourceMappingURL=bootstrap.css.map */的注释，对应的map文件记录了CSS代码编译前对应的SCSS源文件路径，浏览器识别到该映射文件后，会自动将样式来源映射到原始SCSS文件，方便开发调试。
本地没有对应SCSS文件是正常情况，不影响任何功能，如果不需要显示该来源，直接删除CSS文件末尾的Source Map引用注释即可。

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