我有一个Bootstrap菜单,其结构如下:
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="/">
<span class="title">Some Title</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav" data-bind="foreach: navRoutes">
<li><a data-bind="css: { active: isActive() }, attr: { href: hash }, text: name"></a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-cogs"/> Admin<b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<!-- ko foreach: adminRoutes -->
<li><a data-bind="attr: { href: hash }, html: caption"></a>
<!-- /ko -->
</ul>
</li>
<li><a data-bind="click: logOff" href="#"><i class="icon-signout"/> Log Off</a></li>
</ul>
</div>
<div class="loader pull-right" data-bind="css: { active: showLoader }">
<i class ="icon-spinner icon-2x icon-spin" ></i>
</div>
</div>
</nav>
当调整屏幕大小以使宽度降低到变量中@navbarCollapseWidth中设置的阈值以下时,菜单确实会崩溃。但是,导航栏的高度从59px增加到126px。如果宽度增加回到阈值以上,则导航栏高度将恢复为59px的高度。我希望折叠时导航栏高度保持不变,即保持59px。增加预期的行为?我怎样才能实现我正在寻找的行为?
答案 0 :(得分:0)
我发现这个问题实际上是最后一个带有“加载器拉动权”类的导致问题的div。我通过在div中使用“nav-collapse collapse”类来移动div中的div来解决这个问题。不完全令人满意 - 但更好。