Question

我正在努力修改twitter bootstrap 3 navbar-toggle功能上的换行颜色。

正如您在此图片中看到的那样，有一个使用我背景颜色的换行符。

我尝试了许多选项，例如;

.navbar-default .navbar-toggle {
 background-color: #000;
}

以及来自万维网的其他一些建议......但似乎都没有效果。

任何建议都会很棒。

问候＆amp;非常感谢。

编辑1个代码;

<header class="clearfix">
                <div class="navbar navbar-default">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i>

        </button>
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">BollinBuild</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="about.php">ABOUT</a></li>
                            <li><a href="services.php">SERVICES</a></li>
                            <li><a href="testimonals.php">TESTIMONALS</a></li>
                            <li><a href="gallery.php">GALLERY</a></li>
                            <li><a href="contact.php">CONTACT</a></li>
                            <li><a href="admin.php">ADMIN</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div>
            </header>

CSS

#container {
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
}

.navbar {
    margin-bottom: 0;
    background: #000;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.navbar-brand {
    position: relative;
    padding: 21px 25px 21px 25px;
    margin: 0!important;
    transition: all 0.3s ease-in-out;
    color: #1c1c1c;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.navbar-default .navbar-nav {
    margin-right: 0px!important;
    position: relative;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.navbar-default .navbar-nav > li {
    margin-left: 5px;
}

.navbar-default .navbar-nav > li > a {
    color: #04fa00;
    display: block;
    font-size: 14px;
    font-weight: 200;
    padding: 20px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.navbar-default .navbar-nav > li > a {
    border-bottom: 3px solid #000;
}

.navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {
    border-bottom: 3px solid #04fa00;
    color: #04fa00;
}

.navbar-default .navbar-toggle {
  border-color: #000;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #000;
}

Answer 1

你有一个提供白条的边框，只需添加这个CSS：

.navbar-default .navbar-collapse {
    border: none;
}

Navbar-toggle换行颜色

1 个答案: