自定义 Bootstrap 4 个导航栏选项

Question

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

自定义 Bootstrap 4 个导航栏选项

Customize Bootstrap 4 navbar selections

sass

bootstrap-4

twitter-bootstrap-4