Html 导航条不'；当屏幕尺寸改变时，屏幕不会膨胀和收缩

当我改变屏幕尺寸时，我试图让导航条折叠和扩展。我的代码似乎不起作用，我真的看不出问题所在

我希望当屏幕接近平板电脑的屏幕大小时，导航栏会折叠成一个菜单图标。此时，当屏幕尺寸改变时，导航链路只是以无意的方式移动

请参阅下面的代码：

*{
保证金：0；
填充：0；
线高：1；
}
正文{
保证金：0；
字体系列：无衬线；
背景：#FFFFFF；
-webkit字体平滑：抗锯齿；
溢出：隐藏；
溢出x：隐藏；
}
导航{
保证金：0；
字体系列：“Lato”，无衬线；
字体大小：100%；
宽度：自动；
}
.navbar{
保证金：0；
垫面：1.5em；
垫底：1.5em；
左：6em；
右侧填充：5.06em；
背景色：#000；
} 
.navbar品牌{
颜色：#fff；
背景色：#000；
字体大小：22px；
显示：内联；
}
navbar ul li{
显示：内联；
} 
navbar ul li a{
颜色：#fff；
背景色：#000；
字号：18px；
} 
.导航链路{
左侧填充：15px；
右侧填充：15px；
}

引导4导航栏无法按预期工作的原因很简单，因为您没有正确使用导航栏组件

这是Bootstrap 4导航栏的工作版本。您可以看到，在所有组件就位（并正确定位）的情况下，它确实可以按预期工作（并且不需要任何不必要的css或JS攻击）：

您是否尝试过官方引导导航栏？那个让navbar类崩溃的？您的代码不包括引导。css@ZimSystem我需要做什么？从引导基础开始，使用，并在文档中使用。你不需要所有额外的CSS！这是你的导航栏，在文档中做了一点努力：好吧，我回去。谢谢。回答问题的速度也加快了。非常感谢。我删除了我的答案@奇兹