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
html下拉栏加箭头,CSS-下拉菜单上的引导3箭头相关推荐
- [小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
- html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图 思路:div相对定位. 图片默认定位, 文字绝对定位 参考代码 html> /*div1下面 包含着1个图片和1段文字*/ ...
- html下拉栏根据另一个下拉栏改变,第一个下拉菜单可自动更改第二个下拉菜单的选项...
小编典典 参见下文,查看 不使用数据库 的 工作示例 . 使用MySQL数据库的工作示例 如果您想使用数据库连接它,是的,肯定可以.考虑此表: CREATE TABLE `contents` ( `i ...
- 【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
- css基础 CSS 导航栏、CSS 下拉菜单
阅读目录 导航栏 导航栏=链接列表 垂直导航栏 垂直导航条实例 激活/当前导航条实例 创建链接并添加边框 全屏高度的固定导航条 水平导航栏 内联列表项 浮动列表项 水平导航条实例 链接右对齐 添加分割 ...
- 基于iSroll 5.0实现的上拉加载和下拉刷新插件
Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...
- html 微博下拉菜单,jQuery实现模仿微博下拉滚动条加载数据效果
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: 滚动条距离底部 $(function () { var i = 4; $(window).bind(&q ...
- html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷 如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...
- android微信下拉出现小程序,仿新版微信的小程序下拉栏
原标题:仿新版微信的小程序下拉栏 本项目会对金融交易软件中存在的各种View进行模仿绘制,提供详细的实现思路,收集整理相关算法.文档以及专业资料. https://github.com/scsfwgy ...
最新文章
- python 获取程序运行时间
- JMS详细的工作原理
- Flink-on-yarn
- 同步代码块解决线程安全
- Visual Studio 2005中编译调试新功能
- 【APICloud系列|41】融云单聊及消息的处理的对接与实现
- c++创建文件_使用Python实现文件压缩和解压
- Hadoop生态圈-zookeeper本地搭建以及常用命令介绍
- Java技术——你真的了解String类的intern()方法吗
- markdown与latex:像小学生一样写乘X号\times
- 一些嵌入式面试题目的集锦
- GLOG中的(Verbose Logging)VLOG的使用
- 第三方网站不能调用微信公众平台里的图片了 显示此图片来自微信公众号平台未经允许不可引用...
- ifconfig命令作用范围!
- 【GDOI 2016 Day1】疯狂动物城
- chrome开发者工具-timeline的详细介绍
- shell脚本一键安装LNMP(liunx+nginx+mysql+php)环境
- 万字整理,肝翻Linux内存管理所有知识点【Linux内核开发人员必学】都是精髓
- 领域驱动设计在爱奇艺打赏业务的实践
- 蓝桥杯真题 16省Ja3-搭积木(小明最近喜欢搭数字积木, 一共有10块积木,每个积木上有一个数字,0~9。...)搭积木规则: 每个积木放到其它两个积木的上面,并且一定比下面的两个积木数字小。 最