Применить контекстную класс элемент списка в навигационной панели

Question

Рассмотрим следующий фрагмент кода HTML с использованием Bootstrap 3:

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="./">Default <span class="sr-only">(current)</span></a></li> 
     <li><a href="../navbar-static-top/">Static top</a></li> 
     <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

Есть ли способ, чтобы применить контекстную классы, информация, успех, и т.д., в этих Li элементов?

Если я попытаюсь добавить, цвет текста не изменится.

Answer 1

Оберните текст в элементе span, как указано в документации для начальной загрузки.

Helper classes

Работа со специфичностью Иногда классы акцент не могут быть применены в силу специфики другого выбора. В большинстве случаев достаточным обходным путем является обернуть текст в поле < > с классом.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Project name</a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="./"><span class="text-danger">Default</span> <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="../navbar-static-top/"><span class="text-success">Static top</span></a></li> 
 
     <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
 
     </ul> 
 
    </div><!--/.nav-collapse --> 
 
    </div> 
 
</nav>