Невозможно выделить активный элемент навигации в Bootstrap-5. ⇐ CSS

[Anonymous]

Я пытаюсь использовать панель навигации в Bootstrap и хочу выделить (изменить цвет) навигационную ссылку на активной панели. Однако это не работает. Также я использую Bootstrap-5.
Вот мой CSS-файл:

Код: Выделить всё

.nav-link {
color: #666777;
font-weight: 400;
}

.nav-link.active {
color: red;
}

.nav-link:hover {
color: #000;
}

А вот мой HTML-файл:

Код: Выделить всё

[*]



My Webpage




[url=/index.html]My Webpage[/url]




[list]

[url=/index.html]Home (current)[/url]

[*]
[url=/about.html]About[/url]

[*]
[url=#]
Hobby
[/url]

[url=/hobby/anime.html]Hobby1[/url]
[url=/hobby/books.html]Hobby2[/url]
[url=/hobby/vtubers.html]Hobby3[/url]

[/list]

Когда я меняю href в теге на «#», например: О программе в О, цвет меняется, когда я нажимаю на него, но тогда я не могу перевести пользователя на другую страницу.
Я также пытался вручную добавить класс .active к соответствующей навигационной ссылке в каждом файле, но это не сработало.
Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/787 ... ootstrap-5