Bootstrap移动导航栏无法正确折叠

Question

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="<?= Util::res("image/mobile/logo.png") ?>"></a>
            <a class="navbar-brand" href="#"><img class="mobile_lang" src="<?= Util::res("image/mobile/tc.png") ?>"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="text-center navbar_title"><img src="<?= Util::res("image/mobile/bar_home.png") ?>" alt="" style="width:25px;"> <span style="width:16px;">首頁</span></li>
                <li style="display:inline-block;" class="nav_links">
                    <div class="col-xs-3" style="padding-right:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav1.png") ?>" data-hover="<?= Util::res("image/mobile/head1.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav1.png") ?>" data-hover="<?= Util::res("image/mobile/head1.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav2.png") ?>" data-hover="<?= Util::res("image/mobile/head2.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav3.png") ?>" data-hover="<?= Util::res("image/mobile/head3.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-right:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav4.png") ?>" data-hover="<?= Util::res("image/mobile/head4.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav5.png") ?>" data-hover="<?= Util::res("image/mobile/head5.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav6.png") ?>" data-hover="<?= Util::res("image/mobile/head6.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav7.png") ?>" data-hover="<?= Util::res("image/mobile/head6.png") ?>"></a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?= Lang::name("開戶及交易") ?><span class="caret pull-right" style="position:relative; top:8px;"></span></a>
                    <ul class="dropdown-menu">
                        <li><span>開立帳戶</span></li>
                        <li><?= $footerLink->getHTMLTag("account") ?></li>
                        <li><span>資金存取</span></li>
                        <li><?= $footerLink->getHTMLTag("deposit") ?></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?= Lang::name("行情中心") ?><span class="caret pull-right" style="position:relative; top:8px;"></span></a>
                    <ul class="dropdown-menu">
                        <li><?= $footerLink->getHTMLTag("gold_review") ?></li>
                        <li><?= $footerLink->getHTMLTag("silver_review") ?></li>
                        <li><?= $footerLink->getHTMLTag("analyst_review") ?></li>
                    </ul>
                </li>
                <li class="text-center"><i class="fa fa-bars" aria-hidden="true" style="color:#fff;"></i></li>
            </ul>
        </div>
    </div>
</nav>

请注意，有一节没有使用链接，它看起来会影响导航栏高度的计算。

测试链接：

http://kotechweb.com/imperial/tc/

请使用手机访问

如何解决这个问题？谢谢你的帮助。

Answer 1

之所以会发生这种情况，是因为您将静态高度设置为.navbar-collapse

<div class="navbar-collapse collapsing" id="bs-example-navbar-collapse-1" aria-expanded="true" style="height: 420px;">

去掉style属性，它就可以工作了。