部分内部指令出现在顶部有一个酒吧

我在前端使用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

部分内部指令出现在顶部有一个酒吧

回答

相关问题