自定义Bootstrap 4导航栏选择

Question

我正在使用带有Bootstrap 4的custom.css。我有以下几乎看起来像这样的导航栏： 我想要的是有白色的项目和黑色的选择。为此定制bootstrap 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