Html 删除较小设备上的水平滚动

我正在尝试制作一个引导导航栏，在较小的设备上，我在登录内的导航栏上得到一个水平滚动条

您可以通过运行代码段并单击完整页面查看问题，然后调整浏览器窗口的大小

另外，当我在移动设备上单击登录时，我希望内容能够完全显示，而不是给我一个垂直滚动

我还使用了

overflow-x:hidden但滚动条仍然存在。我知道使用
overflow-x:hidden
只会隐藏滚动条，但我仍然可以水平滚动，这是我不希望在移动设备上发生的


html，
身体{
最大宽度：100%；
溢出x：隐藏；
}
.容器液体，
1.没有填充物{
填充：0；
}
navbar先生{
背景：#fff；
边界：#058A9B；
边界半径：0；
}
.navbar默认值{
页边距底部：0；
}
.navbar nav>li>。下拉菜单{
边缘顶部：2倍；
宽度：20vw；
填充：10px0；
背景：#fff；
}
@介质（最小宽度：768px）和（最小宽度：640px）和（最小宽度：480px）和（最小宽度：320px）{
.navbar nav>li>。下拉菜单{
宽度：300px；
}
}
.下拉菜单.窗体控件{
背景色：#fff；
颜色：黑色；
}
.字形图标{
颜色：暗灰色；
}
.还是社交{
边缘顶部：10px；
文本对齐：居中；
颜色：白色；
}
.登录btn，
.社会btn{
宽度：100%；
}
.navbar默认值.navbar nav>li>a，
.navbar默认值.navbar标题>a{
颜色：#777；
字号：18px；
}
.navbar默认值.navbar导航>.open>a，
.navbar默认值.navbar导航>.open>a:焦点，
.navbar默认值.navbar导航>.open>a:悬停{
背景色：#fff；
}

切换导航












登录


或者登录到



脸谱网
谷歌




只添加了一个针对较小设备的媒体查询，即
最大高度：768px

@media only screen and (max-width: 768px) {
  #navbar {
    max-height: fit-content;
  }
 /* And we even need to overwrite the overflow property*/
  .navbar-collapse.in { 
    overflow-y: hidden; 
    overflow-x: hidden; 
  }

}

这样，您的内容将完全可见且不可滚动。您甚至不需要
溢出：隐藏
。
请随意删除
背景色


html，
身体{
最大宽度：100%；
溢出x：隐藏；
}
.容器液体，
1.没有填充物{
填充：0；
}
navbar先生{
背景：#fff；
边界：#058A9B；
边界半径：0；
}
.navbar默认值{
页边距底部：0；
}
.navbar nav>li>。下拉菜单{
边缘顶部：2倍；
宽度：20vw；
填充：10px0；
背景：#fff；
}
.下拉菜单.窗体控件{
背景色：#fff；
颜色：黑色；
}
.字形图标{
颜色：暗灰色；
}
.还是社交{
边缘顶部：10px；
文本对齐：居中；
颜色：白色；
}
.登录btn，
.社会btn{
宽度：100%；
}
.navbar默认值.navbar nav>li>a，
.navbar默认值.navbar标题>a{
颜色：#777；
字号：18px；
}
.navbar默认值.navbar导航>.open>a，
.navbar默认值.navbar导航>.open>a:焦点，
.navbar默认值.navbar导航>.open>a:悬停{
背景色：#fff；
}
@仅介质屏幕和（最大宽度：768px）{
#导航栏{
背景颜色：浅蓝色；
最大高度：适合的内容；
}
}

切换导航












登录


或者登录到



脸谱网
谷歌