2021 Bootstrap 5 移动端菜单添加内容小技巧(2)
如果再重来多少次,我都想要遇见你,即使我无法改变,即使会经历痛苦
如果你看到了《2021 Bootstrap 5 多屏幕自适应 纯新手上路发车(1)》文章之后,有幸看到了第二篇文章只能说明我,对就是我 屈服bootsrtap的菜单了。但兽人永不为奴。
默认的移动端菜单是这样的,左边为loog,右边为收缩菜单——2021 Bootstrap 5 移动端菜单添加内容小技巧(2)
技巧一
右为菜单,左为logo,这个其实在官方的文档有提到过,只需要变化下载代码的位置即可
技巧二
在移动端菜单添加一个人信息的头像,切可以点击出现子菜单,是可以使用我们技巧一的方式在中间添加一个内容就可以了
假设我们访问pc端的时候就会发现,我们添加的内容会卡在中间
如果只要在移动端访问出现,PC端则不显示可以先 设置一个css属性为none
.fengrui-display-none{
display: none;
}
在用css3的媒体查询屏幕小于760后显示内容
/* 分端适配 */
@media(max-width:760px) {
.fengrui-display-none{
display: block;
}
}
此外想修改移动端伸缩菜单的样式,还在努力学习ing


免责声明:
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:1411156739@qq.com

共有 0 条评论