Bootstrap 折叠响应式导航栏高度答案

【问题标题】：Bootstrap Collapsed Responsive Navbar HeightBootstrap 折叠响应式导航栏高度
【发布时间】：2013-08-09 04:10:57
【问题描述】：

我有一个具有以下结构的引导菜单：

<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。增加是预期的行为吗？我怎样才能实现我正在寻找的行为？

【问题讨论】：

您能否发布您的导航栏源，以及所有项目。现在我可以找到你的价值观。我发现没有折叠高度 = 81。折叠高度 91。折叠你的 navbar-inner 有填充 5px（10px 不同）修复 css：navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner{padding:0}。折叠的导航栏也有 margin-bottom: 20px;。修复 css：.navbar-fixed-top { margin-bottom: 0px;}.

标签： twitter-bootstrap collapse navbar

【解决方案1】：

我发现问题实际上是导致问题的最后一个带有“loader pull-right”类的 div。我通过将这个 div 移动到具有“导航崩溃崩溃”类的 div 中来解决这个问题。不完全令人满意 - 但更好。

【讨论】：