ui.bootstrap.accordion在Bootstrap v4中无法正常工作问题求助

你遇到的问题核心在于ui-bootstrap-tpls 2.5.0 和 Bootstrap 4.0.0 不兼容。

ui-bootstrap（针对AngularJS的Bootstrap组件库）的版本与Bootstrap版本是严格绑定的：

• ui-bootstrap 2.x系列是专为Bootstrap 3.x设计的，完全不支持Bootstrap 4的新样式结构、组件命名规范
• 只有ui-bootstrap 3.x及以上版本才开始适配Bootstrap 4

你切换到Bootstrap 3后组件恢复正常，正好验证了这一点——ui-bootstrap 2.5.0本来就是和Bootstrap 3配套开发的。至于Bootstrap 4下出现的「仅显示可点击文本、展开行为不稳定」，是因为ui-bootstrap 2.5.0生成的DOM结构、类名和Bootstrap 4的样式系统完全不匹配，导致样式失效，部分交互逻辑也因为DOM结构差异出现异常。

解决方案 #

结合你的AngularJS版本（1.6.4），推荐两种可行方案：

1. 继续使用Bootstrap 3：如果没有必须用Bootstrap 4的业务需求，保持当前组合（AngularJS 1.6.4 + ui-bootstrap-tpls 2.5.0 + Bootstrap 3.x）是最稳妥的选择，不需要额外调整。
2. 升级ui-bootstrap适配Bootstrap 4：如果一定要用Bootstrap 4，需要把ui-bootstrap-tpls升级到3.x版本（注意：ui-bootstrap 3.x要求AngularJS版本至少1.6.x，你的1.6.4刚好满足）。升级后，组件会自动生成适配Bootstrap 4的DOM结构和类名，样式与交互就能正常工作。

另外补充：AngularJS的ui-bootstrap从3.x开始包名改为angular-ui-bootstrap，安装时注意包名变化即可。

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