html - Bootstrap 自定义导航，添加最大高度中断折叠(删除背景)

Question

我正在使用 BS3 和一堆自定义样式。我知道导致问题的代码行，但我想不出一种方法可以在没有 height 或 max-height 属性的情况下使导航栏不那么高。点击 JSFiddle 并且当您在折叠(移动)时查看菜单时，您会看到没有颜色背景。只需删除最大高度线即可，但导航栏对于我想要的来说太高了。

有大量的 HTML 和 CSS，因此请注意以下粘贴。请注意，我也链接到自定义 bootstrap.css ......

<div class="navbar-wrapper">
    <div class="container-fluid">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#"><img id="logo" src="http://www.thinkliz.com/dev/midtownaustin/img/midtown-church-austin-logo-white-vector.svg" class="img-responsive"></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
    </div>
</div>

CSS:

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
 .navbar-wrapper {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    z-index: 20;
}
.logo {
    margin-top: -42px;
}
.navbar-brand img {
    height: 290px;
    max-height: 130px;
    margin-top: -55px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
 @media (max-width: 768px) {
    .navbar-brand img {
        max-height: 70px;
        margin-top: -60px;
    }
    /* THIS IS WHAT IS BREAKING THE NAV */
    .navbar {
        min-height: 80px;
        max-height: 80px;
    }
    .navbar-toggle {
        margin-top: 23px;
    }
}

Answer 1

那么您是否尝试将移动折叠菜单的背景设置为不同的颜色以便您可以阅读文本？您可以添加自定义 CSS 规则，例如:

.navbar-collapse ul {
    background-color: #ff0000;
}

我怀疑你想要红色背景，但这只是一个例子。