gpt4 book ai didi

html - partial 内部的指令在顶部出现一个栏

转载 作者:行者123 更新时间:2023-11-28 07:30:34 25 4
gpt4 key购买 nike

我正在前端使用 Angular 创建一个 UI。我有一个指令是 navbar。因为我使用的是 ngRoute,所以我在 /home 的部分中使用了该指令。一切正常,但导航栏不是从页面顶部开始的。相反,有一个小 Pane ,导航栏在其下方开始。我希望它类似于顶部的堆栈溢出导航栏。

这是我的index.html

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

我试过在 div 中使用 ng-view 但它仍然不起作用。

主页.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

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

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

我尝试将导航栏直接添加到主 index.html 中,它按预期工作。这个不必要的 Pane 只有在我将它用作指令时才会出现。希望我的问题很清楚。

最佳答案

从 CSS 尝试移除

body {
padding-top: 40px;
}

关于html - partial 内部的指令在顶部出现一个栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31532994/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com