css - Bootstrap - 响应式菜单修复

Question

http://www.bootply.com/jwGIUdSuHM

我正在使用 Bootstrap，顶部有两个菜单。缩小窗口后，单击“我的帐户”时，我的“响应式 View ”将如下所示。注意重叠的选项(不好)。我该如何解决？

我尝试将其设置为 700 而不是大约 300 像素:

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

...虽然问题已经解决，但对我来说并没有什么用，因为它让我的菜单在手机上变得很长。那么，如何在保持菜单高度不变的情况下解决难看的重叠问题呢？

CSS

body { margin-top: 125px; }

h1 {text-transform:uppercase;}

/* Header Nav*/
#faves, #cart {border:none;}
#nav {text-transform:uppercase;}
.multi-col-4 {width:820px;}
.multi-col-2 {width:400px;}


 @media (max-width: 890px) {
    body { margin-top: 65px; }

    /* Nav*/
    .multi-col {width:100%;}
}

HTML

<form>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                <button id="faves" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Favorites</span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
                <button id="cart" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Shopping Cart</span> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> </button>
                <a class="navbar-brand" href="#">Logo</a> </div>
            <!-- end navbar-header -->

            <div id="nav" class="navbar-collapse collapse">
                <div id="navTop" class="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Cart (2) <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#" class="btn btn-primary btn-block">View Cart</a></li>
                            </ul>
                        </li>
                        <li class="dropdown hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorites (6) <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#" class="btn btn-primary btn-block">View All Favorites</a></li>
                            </ul>
                        </li>
                        <li> <a href="#">Option a</a> </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <div class="multi-col multi-col-4">
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Option 2</li>
                                            <li><a href="#">Option 3</a></li>
                                            <li><a href="#">Option 4</a></li>
                                            <li><a href="#">Option 5</a></li>

                                        </ul>
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Option 6</li>
                                            <li><a href="#">Option 7</a></li>
                                            <li><a href="#">Option 8</a></li>
                                            <li><a href="#">Option 9</a></li>
                                            <li><a href="#">Option 10</a></li>
                                            <li><a href="#">Option 11</a></li>
                                            <li><a href="#">Option 12</a></li>
                                            <li><a href="#">Option 13</a></li>
                                        </ul>
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Option 14</li>
                                            <li><a href="#">Option 15</a></li>
                                            <li><a href="#">Option 16</a></li>
                                            <li><a href="#">Option 17</a></li>
                                            <li><a href="#">Option 18</a></li>
                                            <li><a href="#">Option 19</a></li>
                                            <li><a href="#">Option 20</a></li>
                                        </ul>
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Option 21</li>
                                            <li><a href="#">Option 21</a></li>
                                            <li><a href="#">Option 22</a></li>
                                            <li><a href="#">Option 23</a></li>
                                            <li><a href="#">Option 24</a></li>
                                            <li><a href="#">Option 25</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="navBottom" class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option b <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <div class="multi-col multi-col-4">
                                            <ul class="list-unstyled col-md-4" role="menu">
                                                <li class="dropdown-header">Another action</li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                            </ul>
                                            <ul class="list-unstyled col-md-4" role="menu">
                                                <li class="dropdown-header">Another action</li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                            </ul>
                                            <ul class="list-unstyled col-md-4" role="menu">
                                                <li class="dropdown-header">Other Products</li>
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                            </ul>
                                            <ul class="list-unstyled col-md-4" role="menu">
                                                <li class="dropdown-header">Another action</li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Another action</a></li>
                                            </ul>

                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option c <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option d <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option e <span class="caret"></span></a>
                             <ul class="dropdown-menu" role="menu">
                                <li>
                                    <div class="multi-col multi-col-2">
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Account</li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                        </ul>
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Tools</li>
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option f <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <div class="multi-col multi-col-2">
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Account</li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                        </ul>
                                        <ul class="list-unstyled col-md-4" role="menu">
                                            <li class="dropdown-header">Tools</li>
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option g <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Another action</a></li>
                    </ul>
                </div>
            </div>
            <!-- end nav --> 
        </div>
        <!-- end container-fluid --> 
    </nav>


</form>

Answer 1

我用这两行解决了这个问题:

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: none; }
#nav {max-height:400px;}