Установить активный внешний вид выпадающего списка в Bootstrap 4.5

Я только начал создавать свою собственную тему с помощью SASS и Bootstrap, но у меня возникают проблемы с активным появлением выпадающего списка внутри панели навигации. Честно говоря, я хотел бы также изменить вид наведения.

введите описание изображения здесь

Мой код выглядит так:

<li class="nav-item dropdown">
<NavLink href="#" class="nav-link dropdown-toggle text-nowrap" data-toggle="dropdown">
                                        Admin
                        </NavLink>
                        <div class="dropdown-menu bg-customblue1">
                            <NavLink class="nav-link dropdown-item text-light" href="users">Users</NavLink>
                                        <NavLink class="nav-link dropdown-item text-light" href="roles">Roles</NavLink>
                        </div>
</li>

Я установил цвет фона раскрывающегося списка (раскрывающееся меню) в соответствии с моей новой темой (bg-customblue1), и каждый элемент должен иметь текстовую подсветку.

Но вопрос в том, есть ли хороший способ задействовать SASS, чтобы активный вид и вид при наведении курсора соответствовали этой теме?

Спасибо!

/ Хенрик


css sass bootstrap-4 koala
person Henrik Bengtsson    schedule 15.09.2020    source источник
comment
Что вы имеете в виду под хорошим способом использования SASS? Вы хотите изменить значение непосредственно в Bootstrap variables.scss или хотите перезаписать значение извне - тогда Sass совершенно не нужен. Тем не менее .dropdown-item.active, .dropdown-item:active - это селектор.   -  person Simplicius    schedule 15.09.2020
comment
Я имею в виду, что если я создам тему с помощью sass, было бы здорово, если бы вы могли назначить определенные классы для элементов html, чтобы получить правильный эффект на основе созданной темы. Переопределение класса с помощью css на веб-странице напрямую было не совсем тем, что я имел в виду, но я понимаю, что это сработает. Такова была моя идея с написанием.   -  person Henrik Bengtsson    schedule 15.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

В Bootstrap к активному элементу должен быть добавлен класс .active, как описано в здесь < / а>.

Таким образом, вы можете изменить Bootstrap variables.scss и изменить как $dropdown-link-active-color, так и $dropdown-link-active-bg на цвета, которые вы хотите, когда они активны, и на $dropdown-link-hover-color & $dropdown-link-hover-bg для цветов при наведении курсора.

Или вы можете написать свой собственный SASS для этого:

.dropdown-menu {

  .dropdown-item:hover {
    color: $light;
    background-color: $customblue-1;
  }
  
  .dropdown-item.active {
    color: $light;
    background-color: $customblue-1;
    
    &:hover {
      background-color: $customblue-2;
    }
  }
}
person Alessandro    schedule 15.09.2020
comment
Я попробовал ваш подход и включил его в свой custom.scss, но цвет шрифта (цвет) не присоединяется и не отменяет поведение по умолчанию. Есть идеи, почему? - person Henrik Bengtsson; 15.09.2020