Html 引导多个下拉按钮未正确显示

我在互联网上甚至在这个网站上搜索过答案，但是运气不好。我遇到的问题是两个下拉按钮“登录”和“注册”在单击时显示两个下拉菜单我使用了btn group类来解决此问题，但问题出现了，它在较小的移动屏幕上没有正确显示，将其更改为btn类只解决了一点问题，然后问题是显示的选项水平放置，不堆叠，看起来很糟糕。我也尝试了data target，但这也不起作用。如有任何帮助，将不胜感激。下面是我的html和css代码示例

代码

.navbar{
背景色：#00CED1；
边界：无；
}
.navbar默认值.navbar品牌{
颜色：白色；
字体系列：Tahoma；
字体大小：20px；
字体：斜体；
}
.导航栏左{
宽度：70%；
左边距：-15px；
}
#导航格式{
边界：无；
}
#登录{
右边距：16px；
背景：无；
颜色：白色；
边框：2倍纯白；
}
#搜索BTN{
左边距：-13px；
背景色：#00b3b3；
颜色：白色；
边框颜色：#00b3b3；
}
#提交{
宽度：100%；
}
#汉堡：悬停{
背景色：#1673b1；
}
#搜索BTN：悬停{
背景色：#1673b1；
边框颜色：#1673b1；
}
#搜寻{
宽度：100%；
背景色：#00b3b3；
边界：无；
颜色：白色；
}
#密码，
#用户名{
边缘顶部：15px；
}
B
强壮的{
颜色：#1673b1；
}
#形式{
边界：无；
}
#导航师{
边界：无；
}
#form2输入：：占位符{
颜色：白色；
}
#表单输入：：占位符{
颜色：白色；
}
.navbar默认值.navbar切换.图标栏{
背景色：白色；
}
.下拉菜单{
左侧填充：15px；
右侧填充：15px；
}
@媒体屏幕和屏幕（最大宽度：720px）{
B
强壮的{
位置：绝对位置；
最高：0.5%；
左：35%；
}
#导航师{
宽度：80%；
}
.导航栏切换{
边界：无；
}
#导航师{
宽度：165%；
}
.导航栏左{
宽度：100%；
}
#登录{
左缘：5%；
}
}
#导航1{
边框：1px纯黑；
}

LearnLyte连接共享学习
搜寻
注册
注册


名字
姓氏
用户名
电子邮件
登录
登录


用户名
密码





登录

试试这个

LearnLyte连接共享学习
搜寻
注册
注册


名字
姓氏
用户名
电子邮件
登录
登录


用户名
密码






登录

是，当我添加btn group类时，它在桌面上看起来不错，但在移动设备上没有显示出来