Question

我一直坚持这个小问题，但我似乎无法找到解决方案。

我对bootstrap很陌生，因为我用导航编写标题我遇到了一个我似乎无法修复的问题。我希望你们能帮助我。

问题在于：当我调整窗口大小到菜单崩溃的程度时，我得到了漂亮的图标3条框。那部分就像一个魅力。但每当我点击它时，菜单会滑动到最后一个菜单项，而不是跳回来，你只能看到1,5个菜单项。此外，还有一个滚动条可以用来滚动菜单。

这是我的导航代码＆amp;式：

<header>

    <!-- NAVBAR
    ===========================================-->

        <nav class="navbar-wrapper">

            <div class="navbar navbar-collapsed-sm navbar-fixed-top navbar-default" role="navigation">

                <div class="container" >

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="/">navbar<span>brand</span>.nl</a>

                    </div> <!-- navbar-header -->

                    <nav class="navbar-collapse navbar-header-collapse collapse">

                        <ul class="nav navbar-nav navbar-right ">
                            <li class="active"><a href="/">Home</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="resources.html">Resources</a></li>
                            <li><a href="aboutus.html">About us</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul> <!-- nav -->

                    </nav> <!-- navbar collapse -->

                </div> <!-- container -->

            </div> <!-- navbar -->

        </nav> <!-- navbar-wrapper -->

    </header> <!-- header -->

这是css

.navbar-default .navbar-toggle {
    border-color: #FFF !important;
    -webkit-border-radius: 2px;
    -mox-border-radius: 2px;
    border-radius: 2px;
    border-width: 2px;
    width: 46px;
    height: 36px;
    background-color: transparent;
}

.navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus{
    border-color: #f79123 !important;
    background-color: #f79123;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

ul.nav {
    margin: 21px 0 0 0;
    height: 39px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

ul.nav li a {
    margin: 0 15px 0 15px;
    padding: 0;
    display: block;
    height: 28px;
    background: none;
}

ul.nav li a:hover {
    background: none;
}

ul.nav li:last-child a {
    margin-right: 9px;
}

ul.nav li.active > a {
    border-bottom : 3px solid #f79123;
    background: none !important;
}

希望你能帮助我。

- 编辑--- 这是问题的屏幕截图 https://gyazo.com/29fb5cae04dc5e59fdff06d08d4cf574

- 解决方案 - 好吧，通过搜索和搜索我不能再思考，或者至少看起来如此。我发现在我的css中我已经有了UL元素的高度。这是后来在文档中设置的，可能是早期跟踪和错误的代码遗留下来的。这就是菜单折叠到一定高度的原因。

感谢Shehary我找到了它。

谢谢大家的帮助！非常感谢。

Answer 1

从此处删除height

ul.nav {
    margin: 21px 0 0 0;
    height: 39px; <---Remove this
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

要

ul.nav {
    margin: 21px 0 0 0;  
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

Fiddle

Answer 2

根据我的理解，您想要删除当您以较小的屏幕尺寸重新调整和扩展导航栏时出现的滚动条。

这样做，您需要更改CSS，如下所示：

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: inherit;
}

JSFIDDLE

Bootstrap折叠导航栏未完全打开

2 个答案: