html下拉栏加箭头,CSS-下拉菜单上的引导3箭头

CSS-下拉菜单上的引导3箭头

在引导程序2中，下拉菜单具有向上箭头，如此处所示(我不是在谈论尖晶石)。 现在使用bootstrap 3或最新版git时，在我下面的简单示例或bootstrap主页上的示例中都不存在该箭头。

如何使用bootstrap 3重新添加此箭头？

Menu

• a
• b
• c

PS：确切地说，该图片可以在另一篇stackoverflow文章中看到。

4个解决方案

157 votes

您需要在css规则中添加：after和：beforedropdown-menu。这些规则取自Bootstrap 2，是在下拉菜单上方绘制三角形的原因。

JSFiddle演示

.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三角形

Alexander Mistakidis answered 2019-10-24T16:57:19Z

18 votes

只是为了跟进此步-如果您希望箭头正确定位自身(例如，在右对齐的导航栏元素上使用箭头时，则需要以下附加CSS来确保箭头右对齐：

.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上使用pull-right。

Joyrex answered 2019-10-24T16:57:50Z

3 votes

Alexander Mistakidis提供的CSS是正确的。 也就是说，它将在Bootstrap的下拉菜单上方创建箭头。 为了将其正确放置在响应视图(@ user2993108)中，可以在不同的媒体查询或断点处为每个类选择器(.dropdown-menu:before,2583667529373773713409)更改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 */

...

}

}

等等...

Dan answered 2019-10-24T16:58:25Z

2 votes

这是基于Alexander Mistakidis和Joyrex的工作来支持可选的箭头和下拉菜单。 就我而言，我不想在所有下拉菜单中都只有一个箭头。

这样，您可以将arrow类添加到dropdown-menu元素中以获得箭头。 如果Bootstrap将下拉菜单/下拉菜单置于左侧，则还添加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;

}

Lucas Nelson answered 2019-10-24T16:58:59Z