如何更改bootstrap下拉列表：在三角形之前改为不同的形状

Question

经过一番研究后，我发现下拉菜单中的小三角形来自:before pseudo class。但是当我试图改变它的形状时，无论我做什么，它都不会改变。我想把它作为一条粗线连接我的下拉菜单到下拉菜单。有可能实现吗？我希望在图片中实现类似的功能。

<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>

这是jsfiddle和我所指的三角形。

Answer 1

您只需更改边框颜色和样式即可修改该三角形的外观。 Bootstrap正在使用边框来塑造它。例如，这里有一个连接标题和下拉菜单的粗灰线：

http://jsfiddle.net/freginold/o0zuq7Lv/1/

您可以使用:before和:after样式更改颜色，也可以更改线条的粗细。

更新：要添加您自己的图标/角色，请使用调整后的dropdown-menu样式，以缩小边框并扩大内部区域：

http://jsfiddle.net/freginold/o0zuq7Lv/3/