下拉菜单上的引导程序3箭头
在bootstrap 2中，下拉菜单有一个向上的箭头，因为它可以在这里看到（我不是在谈论carret）。 现在使用引导3或最新的GIT这个箭头不存在于我简单的例子下面，也不在引导主页上的例子 。
如何使用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> PS：准确地说，图片可以在另一个 stackoverflow文章中看到。
你需要在css规则之前和之后添加：你的dropdown-menu 。 这些规则取自Bootstrap 2，并且是在下拉菜单上方绘制的三angular形。
JSFiddle DEMO
.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, 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: ''; }
困惑如何？ 看到这里解释css三angular形的animation
只是为了跟上这一点 – 如果你想让箭头正确定位（就像在右alignment的导航栏元素上使用箭头一样），则需要以下CSS来确保箭头右alignment：
.navbar .navbar-right > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu.navbar-right:before { right: 12px; left: auto; } .navbar .navbar-right > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu.navbar-right:after { right: 13px; left: auto; }
请注意“navbar-right” – 这是在BS3中引入的，而不是对于navbars的右移。
Alexander Mistakidis提供的CSS是正确的。 也就是说，它会在Bootstrap的下拉菜单上创build箭头。 为了将其正确放置在响应视图（@ user2993108）中，您可以在不同的媒体查询或断点处更改每个类select器（ .dropdown-menu:before ， .dropdown-menu:after ）的left属性。
例如…
@media (max-width: 400px) { .dropdown-menu:before { position: absolute; top: -7px; left: 30px; /* change for positioning */ ... } .dropdown-menu:after { position: absolute; top: -6px; left: 31px; /* change for positioning */ ... } } @media (max-width: 767px) and (min-width: 401px) { .dropdown-menu:before { position: absolute; top: -7px; left: 38px; /* change for positioning */ ... } .dropdown-menu:after { position: absolute; top: -6px; left: 39px; /* change for positioning */ ... } }
等等…
这基于Alexander Mistakidis和Joyrex的工作，以支持可选的箭头和下拉菜单。 在我的情况下，我不想在所有的下拉菜单上有一个箭头，只有一些。
有了这个，你可以将arrow类添加到dropdown-menu元素来获得箭头。 如果引导程序将下拉/下拉菜单定位到左侧，则也可以添加arrow-right箭头以将箭头移到另一侧。
// add an arrow to the dropdown menus .dropdown-menu.arrow:before { position: absolute; left: 9px; display: inline-block; border-right: 7px solid transparent; border-left: 7px solid transparent; content: ''; } .dropdown-menu.arrow:after { position: absolute; left: 10px; display: inline-block; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ''; } // postion at the top for a 'down' menu .dropdown .dropdown-menu.arrow:before { top: -7px; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); } .dropdown .dropdown-menu.arrow:after { top: -6px; border-bottom: 6px solid #ffffff; } // postion at the bottom for an 'up' menu .dropup .dropdown-menu.arrow:before { bottom: -7px; border-top: 7px solid #ccc; border-top-color: rgba(0, 0, 0, 0.2); } .dropup .dropdown-menu.arrow:after { bottom: -6px; border-top: 6px solid #ffffff; } // support to move the arrow to the right-hand-side .dropdown-menu.arrow.arrow-right:before, .dropup .dropdown-menu.arrow.arrow-right:before { right: 15px; left: auto; } .dropdown-menu.arrow.arrow-right:after, .dropup .dropdown-menu.arrow.arrow-right:after { right: 16px; left: auto; }
