Bootstrap 引导折叠响应导航栏高度

liwlm1x9  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(193)

我有一个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中设置的阈值以下时,菜单确实会折叠。但是导航栏的高度从59 px增加到126 px。如果宽度增加到阈值以上,导航栏的高度将恢复为59 px。我希望导航栏高度在折叠时保持不变,即保持在59 px。增长是预期行为吗?我如何才能实现我所寻求的行为?

huus2vyu

huus2vyu1#

我发现这个问题实际上是最后一个类为“loader pull-right”的div引起的。我通过将这个div移到类为“nav-collapse collapse”的div中来解决这个问题。不是完全令人满意-但是更好。

相关问题