自定义引导4导航栏选择

Question

我使用custom.css与引导4.我有以下的导航栏，看起来几乎像这样的： 我要的是有黑白色的项目和选择。自定义引导CSS的正确方法是什么？这是我的custom.css。我迄今为止所做的改变都是var $ blue。

$blue: #0072bb; 

感谢您的帮助。

更新。添加导航栏代码：

<nav class="navbar navbar-inverse bg-primary" style="height:100%;"> 
      <ul class="nav navbar-nav" id="mainNavbar"> 
       <li class="nav-item"> 
        <a class="nav-link" id="settings_nav_system" data-toggle="tab" 
         ui-sref="body.settings.systemdefaults(
         stateParams[0])" 
         href="#" ng-show="service.permissions['system']>0"> 
         <i class="fa fa-desktop fa-lg"></i> 
         <span>&nbsp;</span><span translate>PreferenceTitle_SystemDefault</span> 
        </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" id="settings_nav_user" data-toggle="tab" 
         ui-sref="body.settings.preferences(
         stateParams[1])" 
         href="#" ng-show="service.permissions['user']>0"> 
         <i class="fa fa-pencil fa-lg"></i> 
         <span>&nbsp;&nbsp;</span><span translate>PreferenceTitle_User</span> 
        </a> 
       </li> 
      </ul> 
     </nav> 

Answer 1

更改导航栏SASS变量..

$brand-primary: #0072bb; 
$navbar-inverse-color: #fff; 
$navbar-inverse-hover-color: #000; 
$navbar-inverse-active-color: #222; 

http://www.codeply.com/go/sGB65XJR63