Bootstrap垂直堆叠顶部图标无法选中问题求助

问题根源 #

核心问题不是单纯的元素间距过近，而是你设置的 .sort-wrapper i.fa{ line-height: 0; } 破坏了图标的盒模型布局。当行高设为0时，两个图标元素的可点击区域会发生重叠——虽然视觉上是上下排列，但第一个图标的下方交互区域和第二个图标的上方区域重合，导致点击顶部图标时，实际触发的是下方图标的事件，tooltip失效也是因为交互区域被挤压重叠，无法正确识别触发动作。

修复方案 #

移除 line-height: 0，改用 margin 控制图标间的间距，确保每个图标的交互区域独立：

修正后的CSS代码 #

.sort-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sort-wrapper i.fa{
  /* 移除line-height: 0，用margin控制图标间距 */
  margin: 2px auto;
}

.clickable {
  cursor: pointer;
  transition: transform 0.2s;
}

.clickable:hover {
  transform: scale(1.1);
}

效果验证 #

修改后，两个图标的点击区域会各自独立，点击 #ascending 会正确输出 ascending，点击 #descending 输出 descending，tooltip也能正常触发。如果需要更紧凑的排列，可调整 margin 值（比如 margin: 1px auto），但不要用 line-height:0 破坏元素的正常盒模型。

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