在引导2下拉菜单有一个向上箭头,它可以看到
here
(我不是在说carret)。现在使用bootstrap 3或最新的git这个箭头不存在我的简单例子下面或在 examples在引导主页上。
(我不是在说carret)。现在使用bootstrap 3或最新的git这个箭头不存在我的简单例子下面或在 examples在引导主页上。
如何使用bootstrap 3再次添加这个箭头?
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> </ul> </li>
解决方法
您需要添加:after和:before css规则到您的下拉菜单。这些规则取自Bootstrap 2,并且是下拉框上方的三角形。
.dropdown-menu:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0,0.2); content: ''; } .dropdown-menu:after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; }
困惑怎么样? See here for an animation that explains css triangles