部分內部指令出現在頂部有一個酒吧

我在前端使用Angular創建一個UI。我有一個指令，即navbar。由於我使用的是ngRoute，因此我在/home中使用了該指令。一切工作正常，但導航欄不從頁面頂部開始。相反，有一個小窗格下方的導航欄啓動。我希望它是像頂部的堆棧溢出導航欄那樣。部分內部指令出現在頂部有一個酒吧

這是我的index.html

<body> 
<ng-view></ng-view> 
</body>

我已經通過內部DIV NG-觀點，但它仍然無法正常工作嘗試。

home.html的

<nav-bar></nav-bar> 
<div class="container"> 
     <div class="row-fluid"> 
      <div class="col-md-12"> 
       <div class="well well-sm">{{flashMessage}}</div> 
      </div> 
     </div> 
     <div class="row-fluid"> 
      <div class="col-md-3 well pre-scrollable scroll-pane"> 
       <span class="glyphicon glyphicon-folder-close"></span> 
       <a href="#toparentnode"> 
        .. 
       </a> 
       <br/> 
       <p>nodes list goes here</p> 
      </div> 
      <div class="col-md-9 pre-scrollable scroll-pane"> 
       <table class="table table-striped table-bordered wrap-table text-center"> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Action</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>Value1</td> 
          <td> 
           <button class="glyphicon glyphicon-edit"></button> 
           <button class="glyphicon glyphicon-remove"></button> 
          </td> 
         </tr> 
         <tr> 
          <td>Value2</td> 
          <td> 
           <button class="glyphicon glyphicon-edit"></button> 
           <button class="glyphicon glyphicon-remove"></button> 
          </td> 
         </tr> 
         <tr> 
          <td>Value3</td> 
          <td> 
           <button class="glyphicon glyphicon-edit"></button> 
           <button class="glyphicon glyphicon-remove"></button> 
          </td> 
         </tr> 
         <tr> 
          <td>Value4</td> 
          <td> 
           <button class="glyphicon glyphicon-edit"></button> 
           <button class="glyphicon glyphicon-remove"></button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div>

navbar.html（這是templateUrl的導航欄指令）

<nav class="navbar navbar-default navbar-inverse"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" 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 navbar-right" href="#/"> 
      <img style="max-width:100px; margin-top: -7px;" src="images/logo.png" alt="Logo"> 
      </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><a href="#/home"><span class="glyphicon glyphicon-home"></span> Home<span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
      <form class="navbar-form navbar-left" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav>

我已經使用Twitter bootstrap和一個CSS命名signin.css這是一個在官方網站上找到示例 - css

這是頂部的不必要窗格 enter image description here

但我想它看起來像是如何堆棧溢出有導航欄。

我已經嘗試將navbar直接添加到主index.html，並且按預期工作。這個不必要的窗格只有當我用它作爲指令時纔會出現。希望我的問題很明確。

來源

2015-07-21 v1shnu

從CSS嘗試刪除

body { 
padding-top: 40px; 
}

來源

2015-07-21 07:49:24 maioman

是的，現在它在頂部。由於這個CSS用於登錄頁面，刪除這也將我的登錄表單移動到頂部。我可以創建一個僅適用於登錄表單的類嗎？ – v1shnu

好吧，將它設置爲0，然後 – maioman

仍然是一樣的。 – v1shnu

ViChU您好。你可以試試看看它是否可以幫助你。

添加navbar-fixed-top

<nav class="navbar navbar-inverse navbar-fixed-top ">

來源

2015-07-21 07:53:02 AngularJR

仍然不起作用。頂部填充沒有去。 – v1shnu

嗨，當你添加這個你還刪除了** navbar-默認**？你有沒有檢查過你沒有在你的css中添加什麼東西？ – AngularJR

是的，與此一起添加了navbar-default。並沒有對CSS做任何改變。我仍然得到了同樣的結果。 – v1shnu

部分內部指令出現在頂部有一個酒吧

回答

相關問題