如何在移动菜单上使用twitter启动时删除出现的水平滚动条

问题描述

请帮助我在这里。
我设置了一个twitter自举菜单，但是当我使用移动版本时，会出现一个水平滚动条：

please help me out here. I styled a twitter bootstrap menu, but a horizontal scroll bar is appearing, when I am on the mobile version:

我能够在jsfiddle上重现它：

I was able to reproduce it on jsfiddle:

我使用它来设置移动版本的样式，但是必须隐藏另一种让滚动条出现的样式。

I am using this to style the mobile version, but there has to be somewhere hidden another style that is letting the scrollbar appear.

 @media (max-width: 767px) { 
    #bs-example-navbar-collapse-1 {
        background-color: #fff;

        a {
            padding: 7px 40px;
        }
    }
 }

感谢您的帮助。

推荐答案

.navbar-nav使用负边距，导致内容流出容器外。这是滚动条的最终原因。将其更改为正填充应该可以修复它=）

.navbar-nav is using negative margins which is causing the content to flow outside of the container. Which is the ultimate reason of the scroll bar. Changing that to a positive padding should fix it =)

.navbar-nav {
    margin: 0;
    padding: 7.5px 15px;
}

JSfiddle to the padding / margin change。

JSfiddle to the padding / margin change.

这篇关于如何在移动菜单上使用twitter启动时删除出现的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！