Question

我正在前端使用Angular创建UI。我有一个指令navbar。由于我使用的是ngRoute，我在/home的部分内部使用了该指令。一切正常，但导航栏不会从页面顶部开始。相反，导航栏下方有一个小窗格。我希望它像顶部的堆栈溢出导航栏一样。

这是我的index.html

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

我尝试过在div中使用ng-view，但它仍无效。

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（这是navBar指令的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和一个名为signin.css的css，这是官方网站示例中的一个css

这是顶部不必要的窗格 enter image description here

但我希望它看起来像堆栈溢出有导航栏。

我尝试将导航栏直接添加到主index.html，它按预期工作。仅当我将其用作指令时，才会显示此不必要的窗格。希望我的问题很明确。

Answer 1

来自CSS的

尝试删除

body {
 padding-top: 40px;
}

Answer 2

ViChU 你好。你可以尝试一下，看看它对你有帮助吗？

添加navbar-fixed-top

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

部分内部的指令显示在顶部有一个栏

2 个答案: