我如何防止引導導航欄從頁

Question

在我的角度單頁的應用程序的其餘部分滾動具有以下導航欄：

<nav class="navbar"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <!--<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">--> 
       <a class="btn btn-navbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
       <div class="nav-collapse"> 
        <ul class="nav"> 
         <li class="dropdown"> 
          <a href="#/">Home</a> 
         </li> 
         <li class="dropdown"> 
          <a href="" data-toggle="dropdown">Customer Instances <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#/itarList">iTAR</a></li> 
           <li class="divider"></li> 
           <li><a href="#/nonItarList">Non-iTAR</a></li> 
          </ul> 
         </li> 
         <li class="dropdown"> 
          <a href="" class="dropdown-toggle" data-toggle="dropdown">Training & Documentation <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#/videoTutorials">Video Tutorials</a></li> 
           <li><a href="#/taskBasedHelp">Task-Based Help</a></li> 
           <li class="divider"></li> 
           <li><a href="#/documentTemplates">Document Templates</a></li> 
           <li><a href="#/artifactSamples">Artifact Samples</a></li> 
          </ul> 
         </li> 
         <li class="dropdown"> 
          <a href="" class="dropdown-toggle" data-toggle="dropdown">Service Requests <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#/viewExistingRequests">View Existing Requests</a></li> 
           <li class="divider"></li> 
           <li><a href="#/enterNewRequest">Enter New Request</a></li> 
          </ul> 
         </li> 
         <li class="dropdown"> 
          <a href="" class="dropdown-toggle" data-toggle="dropdown">Development Tracker <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#/viewBacklogItems">View Backlog Items</a></li> 
           <li><a href="#/viewFeatureReleaseSchedule">View Feature Release Schedule</a></li> 
           <li class="divider"></li> 
           <li><a href="#/viewListOfSuggestedEnhancements">View List Of Suggested Enhancements</a></li> 
           <li><a href="#/suggetAnEnhancement">Suggest An Enhancement</a></li> 
           <li class="divider"></li> 
           <li><a href="#/viewActiveBugReports">View Active Bug Reports</a></li> 
           <li><a href="#/reportABug">Report A Bug</a></li> 
          </ul> 
         </li> 
         </ul> 
          <ul class="nav pull-right"> 
           <li class="divider-vertical"></li> 
           <li class="dropdown"> 
            <a href="" class="dropdown-toggle" data-toggle="dropdown">Site Administration <b class="caret"></b></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#/userAdministration">User Administration</a></li> 
             <li class="divider"></li> 
             <li><a href="#/instanceAdministration">Instance Administration</a></li> 
             <li class="divider"></li> 
             <li><a href="#/applicationAdministration">Application Administration</a></li> 
            </ul> 
           </li> 
          </ul> 
       </div> 
      </div> 
     </div> 
    </nav> 

我需要防止這種導航欄從與頁面的其餘部分滾動。 當我嘗試將navbar-fixed-top類屬性添加到最頂端的元素時，我確實得到了期望的結果，但是，我最右側的導航項（站點管理）正在向下移動（或纏繞），使整個導航欄高出兩倍。 有沒有一種方法來實現這個沒有這種副作用的無滾動導航欄？

Answer 1

您也可以嘗試刪除container DIV多數民衆贊成包裹導航欄..

http://bootply.com/113435

Answer 2

如果當前元素沒有空間，元素將移動到新行。

您可以阻止他們這樣做的唯一方法是在所需的行上爲他們留出空間。嘗試稍微減小文本的大小或刪除一些水平邊距。

請記住，任何人在比您更小的屏幕上訪問您的網站，或者甚至在移動設備或平板電腦上訪問您的網站時，最有可能也會看到該元素下降。