将箭头添加到引导程序下拉列表

我可以弄清楚如何做到这一点。本主题帮助我：adding the arrow to dropdown pills for twitter bootstrap?将箭头添加到引导程序下拉列表

通过添加

.dropdown-menu::after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 8px solid transparent; 
    border-bottom: 8px solid white; 
    border-left: 8px solid transparent; 
    content: ''; 
}

我能得到的箭头显示。但是，箭头顶部没有边框，所以现在看起来就像下拉菜单中的一个空白。有谁知道如何将边框添加到向上箭头？

来源

2013-10-14 Anthony

为边框添加规则。喜欢的东西

border-top: 8px solid white;

来源

2013-10-14 21:02:25 Becuzz

不起作用。只需在箭头顶部放一条水平线 – Anthony

@Anthony您能否分享您的标记和相关的CSS？没有它，我们只能猜测可能是错的。 – Becuzz

加入下面的标记解决：

.savedsearchWrapper .dropdown-menu:after { 
    position: absolute; 
    top: -6px; 
    left: 23px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #ffffff; 
    border-left: 6px solid transparent; 
    content: ''; 
} 


.advancedSearchDropDown .dropdown-menu:before { 
    position: absolute; 
    top: -7px; 
    left: 17px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #ccc; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
}

这些都是引导样式，但选择太具体的我实现。

来源

2013-10-14 21:57:39 Anthony

将箭头添加到引导程序下拉列表

回答

相关问题