Question

我正在使用BS3和一堆自定义样式。我知道引起问题的代码行，但是如果没有height或max-height属性，我想不出让导航栏不那么高的方法。点击 JSFiddle ，当您在折叠（移动）时查看菜单时，您会看到没有彩色背景。只需移除最大高度线即可，但导航栏太高，无法满足我的需求。

有大量的HTML＆amp; 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;
}

我怀疑你在后台想要红色，但这只是一个例子。

Answer 2

如果您在不知道自己真正做什么的情况下使用绝对位置，通常会打破布局。特别是当您使用 CSS框架时。你必须解决太多而且似乎没有结束。

使用bootstrap尽可能自定义，并尽可能少地自行定制。只有你不能用bootstrap做的。

要使用更大（自定义）徽标使导航栏工作，请按照以下说明操作：

Instruction bootstrap navbar with bigger logo

带有您的徽标及其大小。完成此操作后，设置

的背景颜色

.navbar-header和.navbar-collapse。你有一个完美的工作导航栏！

Bootstrap自定义导航，添加最大高度中断折叠（删除背景）

2 个答案: