2013-07-12 109 views
0

我有以下結構的引導菜單:引導摺疊響應導航欄高度

<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在variables.less設置的閾值坍方。但是,導航欄的高度從59px增加到126px。如果寬度增加到閾值以上,則導航欄高度恢復到59px的高度。我希望導航欄高度在摺疊時保持不變,即保持在59px。增加的預期行爲是?我如何實現我正在尋找的行爲?

+0

你可以發佈你的導航欄源,所有項目。現在我可以找到你的價值觀。我發現沒有摺疊高度= 81.摺疊高度91. 摺疊您的導航欄內部填充5px(10px不同)固定css:'navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner {填充:0}'。 摺疊的導航欄也有margin-bottom:20px ;.修復CSS:'.navbar-fixed-top {margin-bottom:0px;}'。 –

回答

0

我發現問題實際上是導致問題的一類「loader pull-right」的最後一個div。我通過在「div-collapse」類中移動div中的div來解決這個問題。不完全令人滿意 - 但更好。