Bootstrap - 响应式菜单修复
http://www.bootply.com/jwGIUdSuHM
我正在使用Bootstrap，顶部有两个菜单。一旦我缩小窗口，我的响应视图＆＃34;当我点击“我的帐户”时看起来像这样。注意重叠选项（不好）。我该如何解决这个问题？
我尝试将其设置为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>
1 个答案:
答案 0 :(得分：0)
我用这两行解决了这个问题：
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: none; }
#nav {max-height:400px;}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？