Javascript 引导导航折叠（导航）滚动-需要隐藏溢出

我正在继续开发我的网站，现在我遇到了另一个问题

当导航条在较小的屏幕上折叠时，会出现一个滚动条，表明元素溢出

我尝试使用

overflow:hidden

属性来删除CSS中的这个问题，但它似乎无法正常工作

请参阅下面的屏幕截图和代码片段以查看问题

@font-face{
字体系列：“蒙特塞拉特灯”；
src:url（'montserrat-light-webfont.eot'）；
src:url（'montserrat-light-webfont.eot？#iefix'）格式（'embedded-opentype'）、url（'montserrat-light-webfont.woff2'）、url（'montserrat-light-webfont.woff'）格式（'woff'）、url（'montserrat-light-webfont.ttf'）格式（'truetype'）、url（'montserrat-light-webfont.svg'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“蒙特塞拉特黑体”；
src:url（'montserrat-semibold-webfont.eot'）；
src:url（'embedded-opentype'）、url（'montserrat-semibold-webfont.woff2'）、url（'montserrat-semibold-webfont.woff'）格式（'woff'）、url（'montserrat-semibold-webfont.woff'）、url（'montserrat-semibold-webfont.ttf'）格式（'truetype'）、url（'montserrat-semibold-webfont.svg'）、montserratsemibold-webfont.svg'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
#标题{
填充：10px0；
}
@介质（最小宽度：768px）{
.navbar.navbar导航{
显示：内联块；
浮动：无；
垂直对齐：顶部；
}
.导航栏.导航栏塌陷{
文本对齐：居中；
}
.navbar品牌{
显示：无；
}
}
navbar先生{
边缘底部：0px；
字体系列：“蒙特塞拉特之光”；
文本转换：大写；
边框顶部：2个实心#000；
边框底部：2倍实心#000；
边界半径：0px；
}
img.logoEmpreus{
左边距：自动；
右边距：自动；
显示：块；
边缘底部：10px；
}
img.logoEmpreus:悬停{
-webkit动画名称：rubberBand；
动画名称：橡皮筋；
}
#页面{
保证金：0px自动；
}
李{
显示：内联；
保证金：0-1px；
}
李阿{
颜色：黑色；
字体大小：16px；
文字装饰：无；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
李娜：停下来{
颜色：蓝色；
字号：18px；
文本装饰：无
}
主动的，主动的{
字体大小：粗体；
颜色：#333；
文本装饰：无
}
保险商实验室{
保证金：0自动；
字体系列：“蒙特塞拉特之光”；
文本转换：大写；
}
.主动{
字体系列：“蒙特塞拉特黑体”；
}
.imageInside{
位置：相对位置；
宽度：100%；
/*对于IE 6*/
}
氢{
边际上限：0px；
边缘底部：0px；
}
氢跨度{
颜色：白色；
字体：粗体0.8em“蒙特塞拉特半粗体”，Helvetica，无衬线；
字母间距：-1px；
背景：rgb（0,0,0）；
/*退色*/
背景：rgba（0,0,0,0.7）；
填充：10px；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
#基础ul{
保证金：0自动；
边框顶部：2个实心#000；
边框底部：2倍实心#000；
填充：10px；
文本对齐：居中；
字体系列：“蒙特塞拉特之光”；
文本转换：大写；
}

问题|堆栈溢出
切换导航







标志问题。

事实上，这个问题比看起来更容易回答。
在Bootstrap中，

Bootstrap.css

文件中确实默认启用了

overflow-x

属性

.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

要解决此问题，需要进行简单的属性更改。

Overflow-x:hidden

---

因此，在折叠的导航栏上不再滚动

此CSS规则导致您的溢出

li {
  display:inline;
  margin:0 -1px;
}

删除它，只需使用特定的选择器以元素为目标。现在，您的菜单将在移动设备上保持对齐，并且您的鼠标悬停属性将与蓝色作品保持一致

请参阅工作示例代码段

#标题{
填充：10px0；
}
#header.logoEmpreus{
左边距：自动；
右边距：自动；
显示：块；
边缘底部：10px；
}
#header.logoEmpreus:悬停{
-webkit动画名称：rubberBand；
动画名称：橡皮筋；
}
@介质（最小宽度：768px）{
.navbar.navbar-default.navbar导航{
显示：内联块；
浮动：无；
垂直对齐：顶部；
}
.navbar.navbar-default.navbar折叠{
文本对齐：居中；
}
.navbar.navbar-default.navbar品牌{
显示：无；
}
}
.navbar.navbar-default{
边缘底部：0px；
字体系列：“蒙特塞拉特之光”；
文本转换：大写；
边框顶部：2个实心#000；
边框底部：2倍实心#000；
边界半径：0px；
}
.navbar.navbar-default.navbar导航ul{
保证金：0自动；
字体系列：“蒙特塞拉特之光”；
文本转换：大写；
}
.navbar.navbar-default.navbar导航李a{
颜色：黑色；
字体大小：16px；
文字装饰：无；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.navbar.navbar-default.navbar导航李a:hov