html - 响应式导航栏在角度内容上重叠
问题描述
我nav
喜欢下面
<nav class="navbar navbar-expand-sm navbar-light navbar-fixed-top ">
<!-- <a class="navbar-brand" href="#"></a> -->
<button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation">
<span #tasknote class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse">
<ul class="navbar-nav mr-auto sub-menu dl-submenu">
<li class="nav-item menu-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">first</a>
</li>
</ul>
</div>
</nav>
和下面的剩余内容部分
<div>
//some content here
</div>
当我单击Navabar-toggler
它时,它会在响应式内容上重叠。我们如何在 Angular 4 项目中进行纠正
解决方案
您可以通过以下方式实现
组件.ts
classIsSet=false
toggleClass()
{
this.classIsSet=!this.classIsSet;
}
组件.html
<nav class="navbar navbar-expand-sm navbar-light navbar-fixed-top ">
<button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation"
(click)="toggleClass()">
<span #tasknote class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse">
<ul class="navbar-nav mr-auto sub-menu dl-submenu">
<li class="nav-item menu-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item menu-item">
<a class="nav-link" href="#">first</a>
</li>
</ul>
</div>
</nav>
//内容部分
<div [ngClass]="{'res-nav':!classIsSet,'res-nav':classIsSet}">
//your required content
</dv>
组件.css
.res-nav{
margin-top: 200px;//your required top size
}
希望能解决你的问题!!
推荐阅读
- java - 在光线追踪中,图像平面在哪里?
- three.js - 三.js画布纹理drawImage为黑色
- kibana - 在 Kibana 中显示之前如何处理和标记日志数据,使用 filebeat 进行 logstash 转发
- c# - 分隔文本到 DataTable
- c# - 如何让特定用户永久登录
- java - 动态绑定条件 Java
- phpstorm - 在 PhpStorm 中生成 for 循环的简写
- state - autofac聚合服务中如何通过属性名区分注册?
- jquery - 如果复选框为空并且所有输入框具有相同的名称,如何隐藏输入框
- mysql - mysql语法在本地出错,但在生产中没有