Bootstrap 4: Можно ли изменить цвет шрифта для отключенного класса Bootstrap? - PullRequest
Новая
       38

Bootstrap 4: Можно ли изменить цвет шрифта для отключенного класса Bootstrap?

0 голосов
/ 22 апреля 2020

Я использую версию 4.4.1 из Bootstrap gem. У меня есть Bootstrap 4 navbar в моем приложении Rails. Вот некоторые из моих кодов Navbar. 

  <ul class="navbar-nav ml-auto">
    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden"> <a href="#top"></a> </li>
    ..........
    <li class="nav-item nav-link"><%= link_to "#{t :link_story}", story_path %></li>
    <li class="nav-item nav-link disabled"><%= link_to "#{t :link_blog}", blog_path %></li>
    <li class="nav-item nav-link disabled"><%= link_to "https://www.facebook.com/xxxxxxxx/", target: "_blank" do %><i class="fab fa-facebook-f"></i><% end %></li>
    <li class="nav-item nav-link disabled"><%= link_to "https://twitter.com/lightbecorp", target: "_blank" do %><i class="fab fa-twitter"></i><% end %></li>
  </ul>

Класс отключен отлично работает. Вы не можете нажимать на них вообще, что я и хочу. Я хочу, чтобы эти ссылки были серыми.

Вот код CSS. Последняя строка - моя попытка изменить цвет шрифта. 

.navbar-custom { padding: 0; border-bottom: 0; letter-spacing: 1px; background: $navBackColor; text-transform: uppercase; }
.navbar-custom .navbar-brand { text-transform: capitalize;  }
.navbar-custom .navbar-brand:focus { outline: 0; }
.navbar-custom .navbar-toggler { color: #eee; font-size: 129%; border-radius: 2px; padding: 0 4px; }
.navbar-custom .navbar-toggler:hover, .navbar-custom .navbar-toggler:focus { background-color: #e75926; color: #ffffff; }
.navbar-custom .navbar-brand .navbar-toggler:focus, .navbar-custom .navbar-brand .navbar-toggler:active { outline: 0; }
.navbar-custom a { color: $linkColor; font-weight: bold; }
.navbar-custom i.fas { color: $red; font-weight: bold; }
.navbar-custom .navbar-nav li a { -webkit-transition: background .3s ease-in-out; -ms-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out;  transition: background .3s ease-in-out; }
.navbar-custom .navbar-nav li a:hover { outline: 0; color: $linkColorHover; background-color: transparent; }
.navbar-custom .navbar-nav li a:focus, .navbar-custom .nav li a:active { outline: 0; background-color: transparent; color: $linkColorHover; }
.navbar-custom .navbar-nav li.active { outline: 0; }
.navbar-custom .navbar-nav li.active a { background-color: rgba(255,255,255,.3); }
.navbar-custom .navbar-nav li.active a:hover { color: $linkColorHover; }
.navbar-custom .navbar-nav li .disabled { color: $grayDisabled; }

Я также попробовал следующее, но ни один из них не сработал. 

.navbar-custom .disabled { color: $grayDisabled; font-weight: bold; }

.navbar-custom a { color: $linkColor; .disabled { color: $grayDisabled; font-weight: bold; } font-weight: bold; }

.navbar-custom .navbar-nav li a.disabled { color: $grayDisabled; }

.navbar-custom a.disabled { color: $grayDisabled; font-weight: bold; }

Вся информация, которую я нашел, связана Bootstrap 3, где вам нужно было кодировать pointer-events: none; в вашей таблице стилей CSS. Класс .disabled использует pointer-events: none;.

Я хочу использовать классы .nav-item и .nav-link, чтобы сохранить эти элементы в том же стиле, что и рабочие ссылки, за исключением цвета шрифта.

Я не увидел в документации ничего, что бы я не мог изменить цвет шрифта класса.

Как мне это сделать?

1 Ответ

1 голос
/ 22 апреля 2020

Просто измените последнюю строку на 

.navbar-custom .navbar-nav li.disabled a { color: $grayDisabled; }
...