Bootstrap 4 navbar активный цвет группы - PullRequest
Новая
       5

Bootstrap 4 navbar активный цвет группы

0 голосов
/ 14 мая 2018

На панели навигации Bootstrap 3, когда ссылка активна, цвет фона ссылки изменяется, чтобы показать, что она активная ссылка. Это кажется отсутствующим в Bootstrap 4. Есть ли способ показать это или мне нужно переопределить активный класс?

Панель навигации Bootstrap 3 показана ниже. Вы видите, что активная домашняя ссылка выделена. Как мне показать это в Bootstrap 4.

enter image description here

Код угловой 5 ниже 

  <div class="navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarContent">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
        <a class="nav-link" [routerLink]="['/home']" (click)="navbarCollapsed = true">HOME</a>
      </li>
      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/page1']" (click)="navbarCollapsed = true">Page 1</a>
      </li>
    </ul>
  </div>

Ответы [ 3 ]

0 голосов
/ 14 мая 2018

Применяется класс .active, но он не будет виден , если у Navbar нет классов navbar-dark или navbar-light, которые использовались для определения цвета active ссылки ...

  • Используйте navbar-dark для светлых / белых ссылок на темном фоне
  • Используйте navbar-light для темных / серых ссылок на светлом фоне
0 голосов
/ 17 мая 2018

Bootstrap 4 не имеет CSS для активного класса.

Так что вы должны добавить CSS самостоятельно

Просто добавьте CSS как 

.active {
   background:#4FA9DC; color:#000;
}
0 голосов
/ 14 мая 2018

Свойство [routerLinkActive] определяет класс css, который будет добавлен к элементу, когда он будет соответствовать определенному маршруту.

Итак, в вашем случае класс active будет добавлен к элементу. Что вам нужно сделать, это определить активный класс в вашем CSS-файле, как @JavascriptHuppTechnologies, предложенный в комментариях.

...