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崩潰

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

刪除樣式屬性，它應該工作。