Html 引导导航下拉列表存在问题

我已经做了一个引导导航与一些自定义样式，但我不确定为什么下拉是如此奇怪

以下是一个屏幕截图：

以下是我的HTML和自定义CSS：

nav.navbar-static-top{
页边距底部：0；
背景：黑色；
高度：100px；
线高：100px；
}
.navbar.navbar导航{
显示：内联块；
浮动：无；
垂直对齐：底部对齐；
背景：黑色；
}
.导航栏.导航栏塌陷{
文本对齐：居中；
}
.导航栏.导航栏折叠李a{
颜色：白色；
}
@介质（最大宽度：768px）{
.导航栏切换{
位置：绝对位置；
右：0；
最高：25%；
}
}

切换导航

您必须调整一些CSS规则：导航栏切换类不需要任何规则，您可以在导航栏上使用填充而不是高度/行高。

内联块

规则是导致导航栏在768px下无法扩展到全宽的原因，因此您应该将这些规则插入到媒体查询中

请参阅工作示例代码段

.navbar.navbar-inverse{
背景：黑色；
}
.navbar.navbar-reverse.navbar折叠{
文本对齐：居中；
}
.navbar.navbar-reverse.navbar导航>li>a{
颜色：白色；
}
@介质（最小宽度：768px）{
.navbar.navbar-reverse{
填充顶部：50px；
垫底：0px；
}
.navbar.navbar-inverse.navbar导航{
显示：内联块；
浮动：无；
垂直对齐：底部对齐；
背景：黑色；
}
}
@介质（最大宽度：767px）{
.navbar.navbar-reverse{
填充顶部：25px；
垫底：25px；
}
}

切换导航

我爱你@vanburen！哈哈