Question

所以我有一个导航栏固定的顶部，它将以992px的速度崩溃，大多数移动屏幕都不会在任何低于此值的情况下崩溃。好吧，从我能说的话来说。问题是，当我尝试在屏幕下方增加导航栏高度时，我无法垂直居中导航栏上的任何内容 - 作为徽标的占位符或下拉按钮。无论我尝试什么，我都在努力增加下拉按钮的大小。最后，只要我增加导航栏的高度，当我单击下拉菜单时，背景图像就会消失，但它可以正常使用默认高度。我真的希望有人知道一两招，因为似乎很多人都在使用navbar-fixed-top。

这是html设置：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Logo</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="collapsed-navbar">
                <ul class="nav navbar-nav">
                    <li><a ng-href="#link">Link 1</a></li>
                    <li><a ng-href="#link">Link 2</a></li>
                    <li><a ng-href="#link">Link 3</a></li>
                    <li><a ng-href="#link">Link 4</a></li>
                    <li class="divider"></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><img class="img-circle nav-profile-image" src="images/default_pic.png" /></li>
                    <li><a ng-href="#link">Profile</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

到目前为止这里是CSS：

@media (max-width: 992px) {    
    .nav-profile-image {
        display: none;
    }

    .navbar {
        height: 80px;
        font-size: 24px;
    }

}

@media (min-width: 992px) {
    .nav-profile-image {
        height: 40px;
        margin-top: 5px;
    }
}

.navbar {
    background-image: url('../images/noise-background.jpg');
    background-color: #F8F8F8;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #555;
    background-color: #E7E7E7;
    opacity: 0.6;
}

.navbar-default .navbar-nav > .active > a:hover {
    color: #555;
    background-color: #E7E7E7;
    opacity: 1;
}

提前致谢！

增加高度时Bootstrap navbar-fixed-top会中断

0 个答案: