Адаптивная панель навигации перекрывается с содержимым в угловых - PullRequest
Новая
       6

Адаптивная панель навигации перекрывается с содержимым в угловых

0 голосов
/ 03 сентября 2018

у меня 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 проекта

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете достичь следующим образом

component.ts 

classIsSet=false
toggleClass()
  {
   this.classIsSet=!this.classIsSet;
  }

component.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>

component.css 

.res-nav{
margin-top: 200px;//your required top size
}

Надеюсь, это решит вашу проблему !!

...