Javascript 在bootstrap 4中使菜单图标不可移动和全宽下拉菜单

我有两个大问题，我不知道如何解决它们

这是我的代码：

@font-face{
字体系列：“yekani”；
src:url（“../fonts/yekan.ttf”）；
}
@字体{
字体系列：“yekani”；
src:url（“../fonts/yekan.eot”）；
}
@字体{
字体系列：“yekani”；
src:url（“../font/yekan.woff”）；
}
身体{
字体系列：叶卡尼；
}
.容器液体{
填充：0.6rem；
}
.菜单{
}
.链接a{
字体大小：1.25rem；
颜色：#333；
}
.菜单{
盒影：0 1px 4px 1px#d0d0；
}
.logo img{
宽度：120px；
}
.btn大纲小学{
边框宽度：2倍；
边框颜色：#cce1e7；
颜色：#3dacd9；
}
.导航栏导航.导航链接{
左侧填充：2rem！重要；
}
.links i{
颜色：#F5；
字号：1.2rem；
}
.导航杆切换器i{
字号：2rem；
}
.navbar.dropdown{position:static；}
.navbar.下拉菜单{
宽度：80rem；
左：0；
右：40雷姆；
/*导航项目高度*/
顶部：5雷姆；
}

مثال بوت استرپ
عضویت : ورود

像这样改变你的结构。将左侧按钮保持在导航栏内，而不是导航栏外。使用引导的

navbar品牌

类

@font-face{
字体系列：“yekani”；
src:url（“../fonts/yekan.ttf”）；
}
@字体{
字体系列：“yekani”；
src:url（“../fonts/yekan.eot”）；
}
@字体{
字体系列：“yekani”；
src:url（“../font/yekan.woff”）；
}
身体{
字体系列：叶卡尼；
}
.容器液体{
填充：0.6rem；
}
.菜单{}
.链接a{
字体大小：1.25rem；
颜色：#333；
}
.菜单{
盒影：0 1px 4px 1px#d0d0；
}
.logo img{
宽度：120px；
}
.btn大纲小学{
边框宽度：2倍；
边框颜色：#cce1e7；
颜色：#3dacd9；
}
.导航栏导航.导航链接{
左侧填充：2rem！重要；
}
.links i{
颜色：#F5；
字号：1.2rem；
}
.导航杆切换器i{
字号：2rem；
}
.导航栏.下拉列表{
位置：静态；
}
.navbar.下拉菜单{
宽度：80rem；
左：0；
右：40雷姆；
/*导航项目高度*/
顶部：5雷姆；
}

مثال بوت استرپ
عضویت : ورود