gpt4 book ai didi

twitter-bootstrap - Twitter Bootstrap 3 - 在下拉菜单上添加箭头(仅适用于桌面)

转载 作者:行者123 更新时间:2023-12-02 04:33:32 25 4
gpt4 key购买 nike

所以我用这个方法添加了我的箭头:bootstrap 3 arrow on dropdown menu

在桌面上效果很好,但唯一的问题是折叠时箭头仍然出现在移动 View 中 (<768px)。

演示:http://jsfiddle.net/nolabel/Mk9PD/

.navbar-nav>li>.dropdown-menu, ul.dropdown-menu {
border: 5px solid #7ed1e3;
border-radius: 10px;
}
.dropdown-menu:after {
position: absolute;
top: -16px;
left: 24%;
display: inline-block;
border-right: 11px solid transparent;
border-bottom: 11px solid #7ed1e3;
border-left: 11px solid transparent;
content: '';
}
.dropdown-menu:before {
position: absolute;
top: -17px;
left: 25%;
display: inline-block;
border-right: 12px solid transparent;
border-bottom: 12px solid #ccc;
border-left: 12px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}

解决这个问题的最佳方法是什么?

最佳答案

您可以将 :before:after 放入设备 width 的媒体查询中仅显示您希望的内容

<强> demo

@media screen and (min-width:750px) {
.dropdown-menu:after {
position: absolute;
top: -16px;
left: 24%;
display: inline-block;
border-right: 11px solid transparent;
border-bottom: 11px solid #7ed1e3;
border-left: 11px solid transparent;
content:'';
}
.dropdown-menu:before {
position: absolute;
top: -17px;
left: 25%;
display: inline-block;
border-right: 12px solid transparent;
border-bottom: 12px solid #ccc;
border-left: 12px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content:'';
}
}

关于twitter-bootstrap - Twitter Bootstrap 3 - 在下拉菜单上添加箭头(仅适用于桌面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22492146/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com