Question

切换时，我有许多导航栏崩溃。现在它只能显示部分折叠的导航栏。我需要向下滚动以获取更多导航栏。有没有办法让它显示所有的导航栏？

我试图用

来解决问题

.collapse{
    height: 900px;
}

但它只会减少显示的导航栏数量，在达到900px后，它将无法再显示更多。

enter image description here

<style>
.collapse{
    height: 900px;
}
</style>

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <p class="navbar-brand">User</p>
        </div>  

        <div class="collapse  navbar-collapse" id = "myNavbar">
            <ul class="nav navbar-nav">
                <li ><a href="#"><span class="glyphicon glyphicon-pencil"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-heart"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-edit"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-upload"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-music"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-plus"></span> something</a></li>
                <li class = "dropdown">
                    <a class = "dropdown-toggle" data-toggle = "dropdown" href="#"><span class="glyphicon glyphicon-th-list"></span> something<span class="caret"></span></a>
                    <ul class = "dropdown-menu">
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-search"></span> something</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href = "#"><span class = "glyphicon glyphicon-log-out"></span> something</a></li>
            </ul>
        </div> 
    </div>  
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

由于

Answer 1

对于.navbar-collapse，它取决于max-height样式。

将此设置为您的css

.navbar-collapse {max-height:none}

Demo Link

bootstrap3切换按钮显示所有导航栏（无向下滚动按钮）

1 个答案: