Bootstrap 4折叠组件触发链接样式异常如何解决？

这问题很常见，我来帮你快速搞定！你的核心问题是当前的<a>标签只是普通文本链接，没有应用和网站其他链接一致的样式类（不管是Bootstrap自带的还是你们自定义的），所以才会呈现普通文本状态。下面给你两种最实用的解决方案：

方案1：用Bootstrap自带的链接按钮样式 #

Bootstrap专门提供了btn btn-link类，能让按钮看起来和普通链接完全一致，同时保留折叠触发的功能。修改后的代码如下：

<div id="collapseOne" class="collapse"> collapsed text </div> 
<a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">more / less</a>

这个类会自动继承Bootstrap的默认链接样式（包括颜色、hover高亮效果等），完美匹配其他默认链接的表现。

方案2：应用网站自定义的链接样式类 #

如果你们网站有自己定义的全局链接样式类（比如.site-primary-link、.custom-text-link这类），直接把这个类加到<a>标签上就行，比如：

<div id="collapseOne" class="collapse"> collapsed text </div> 
<a class="custom-text-link" data-toggle="collapse" data-target="#collapseOne">more / less</a>

这样就能和网站其他使用该类的链接样式完全统一。

小技巧 #

如果不确定网站用的是哪种链接样式，你可以右键点击网站上正常显示的链接，选择“检查元素”，查看它的class属性里的样式类，把相同的类复制到你的折叠触发<a>标签上就好啦。

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