Изменение цвета текста в навигационном бутстрапе

В настоящее время у меня есть эта часть html, которая представляет соответствующую часть моего навигатора:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>
        </ul>
    </div>
</nav>

И у меня есть этот кусок css, который я надеялся использовать для изменения цвета текста на панели навигации:

.nav.navbar-nav.navbar-right {
    color: blue;
}

Единственная проблема заключается в том, что цвет текста остается неизменным. Я также видел, что очень похожий вопрос был нераскрытым. Бьюсь об заклад, любой, кто может решить эту проблему, может решить и другую.

Ответы

Ответ 1

Сделайте следующее:

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

Вышеуказанные будут нацелены на конкретные ссылки, которые вы хотите, по сравнению с стилем всего синего списка, который вы делали изначально. Вот JsFiddle.

Другой способ - создать другой класс и реализовать его так:

HTML

<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>

CSS

.color-me{
    color:blue;
}

Также продемонстрировано в этом JsFiddle

Ответ 2

Начиная с начальной загрузки 4, ответ состоит в том, чтобы просто установить navbar-dark в элементе nav, который установит текст и ссылки на светлую тему.

<nav class="navbar navbar-dark">

Ответ 3

Попробуйте это

.nav.navbar-nav.navbar-right li a span{
    color: blue;
}

Если это не сработает, попробуйте

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

Ответ 4

Тема, с которой вы связались, отвечает на ваш вопрос. Вам нужно настроить таргетинг на элементы a. Например.

.nav.navbar-nav.navbar-right a {
    color: blue;
}

Если это не сработает, просто нужно быть более конкретным. Например.

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

Ответ 5

этот код будет работать,

.navbar .navbar-nav > li .navbar-item ,
.navbar .navbar-brand{
                       color: red;
                      }

вставьте в свой CSS и запустите, если у вас есть элемент ниже

определить его как класс .navbar-item

например

<li>@Html.ActionLink("Login", "Login", "Home", new { area = "" },
 new { @class = "navbar-item" })</li>

ИЛИ ЖЕ

<li> <button class="navbar-item">hi</button></li>

Ответ 6

Для изменения цвета текста в навигационной панели вы можете использовать встроенную CSS как;

<a style="color: #3c6afc" href="#">

Ответ 7

Попробуйте это в своем css:

#ntext{
 color: #000000;
  }

Затем во всех списках списков навигации вы увидите следующее:

<li><a href="#" id="ntext"><span class="glyphicon glyphicon-user"></span> About</a></li>

Ответ 8

Если вам нужно изменить цвет фона панели навигации, вы можете сделать следующее:

<nav class="navbar navbar-expand-lg navbar-light" style="background-color=#e3f2fd">

И чтобы изменить текст:

<a class="nav-link" href="#" style="color:#ccc">

Ответ 9

.nav-link {
color: blue !important;
}

Работал на меня. Bootstrap v4.3.1

Ответ 10

Фактически, мы можем просто использовать стандартные цвета текста начальной загрузки вместо взлома CSS-форматов.

Примеры стандартных цветов: text-primary, text-secondary, text-success, text-danger, text-warning, text-info

В приведенном ниже примере кода Navbar текст домашней Homepage будет выделен оранжевым цветом (text-warning).

<a class="navbar-brand text-warning" href="/" > Homepage </a>

В NavBar пункт меню образца сильфона, текст Menu Item будет в синем цвете (text-primary).

<a class="dropdown-item text-primary" href="/my-link">Menu Item</a>

Ответ 11

Синтаксис:

.nav navbar-nav .navbar-right > li > a {
   color: blue;
}