求助：Bootstrap按钮点击时未显示外框（Outline）如何解决

你遇到的这个情况是Bootstrap 5的默认设计行为：

Bootstrap 5为了优化无障碍访问体验，调整了按钮的焦点样式逻辑——只有当用户通过**键盘导航（比如按Tab键切换焦点）**时，按钮才会显示焦点外框；而用鼠标点击按钮时，不会触发这个外框显示。这是因为Bootstrap 5使用了:focus-visible伪类来控制焦点样式，这个伪类只会在用户通过键盘交互时生效，避免鼠标点击时出现不必要的视觉干扰。

验证默认行为 #

你可以试试用Tab键切换到按钮上，此时应该能看到按钮周围的焦点外框，这说明功能是正常的。

自定义让鼠标点击也显示外框 #

如果你的场景需要鼠标点击按钮时也显示外框，可以通过自定义CSS覆盖默认样式：

.btn:focus {
  outline: 0.25rem solid rgba(13, 110, 253, 0.5);
  box-shadow: 0 0 0 0.5rem rgba(13, 110, 253, 0.25);
}

这段代码会给所有.btn类的元素在:focus状态下添加外框和阴影，和键盘导航时的样式一致。

补充说明 #

这种设计是符合现代Web无障碍标准的，确保键盘用户能清晰识别当前焦点位置，同时避免鼠标用户被不必要的焦点样式打扰。

内容的提问来源于stack exchange，提问作者Máté Menyhért