Bootstrap 当导航栏高度增加时，下拉菜单变得透明

Question

我不是很有经验，但我确实善于发现问题。我的 bootstrap 导航栏需要 150 像素的高度才能容纳更大的徽标图像。当我将高度组件放在 CSS 中并将 window 的大小调整为 767 像素以下时，下拉菜单失去背景颜色并变得透明——使 words/links 无法看到。如果我从 CSS 中删除高度，菜单会返回，但高度不正确。我已经为此苦苦思索了几个小时，需要一些想法。您可以在 http://www.ashlandlockandsafe.com/index3.html 看到它（调整 window 的大小以查看问题）。

    .navbar { 
    background:#2D5F84;
    height:155px;
    border-bottom: 2px solid #000;
     }

这是 CSS 的其余部分（我已经通过调整导航栏的高度相应地调整了所有导航栏评论模板 CSS。

@media screen and (max-width: 767px) {
.well {
    font-size:2.5em;
    text-align:center;
    text:#000;
    padding:0;
    border:#000 solid 4px;
    background-image:url(../images/metal.png);
    background-image:no-repeat;
    background-size:contain;
    background-position:center;


}
h1 {text-align:center;


}
.phonetxt {
    font-size:36px;
    text-align:center;
}

}
body {
    padding-top: 150px; /* Required padding for .navbar-fixed-top.         Change  if height of navigation changes. */
background-image:url(../images/brushedsilverback.jpg);
}

.navbar-fixed-top .nav {
padding: 60px 0;
}

.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}

footer {
padding: 30px 0;
}

@media(min-width:768px) {
    body {
    padding-top: 150px; /* Required padding for .navbar-fixed-top.     
 Change if height of navigation changes. */
    }

.navbar-fixed-top .navbar-brand {
    padding: 13px 0;
}
 .well {
    font-size:2em;
    text-align:center;
    border:#000 solid 2px;
    border-radius:0;
    text:#000;
    background-image:url(../images/metal.png);
    background-image:no-repeat;
    padding:2 0;
    }

    h1 {font-family:"arial";
        font-size:17px;
        font-weight:700;
    }

  }

@media(min-width:925px) {
    body {
    padding-top: 150px; /* Required padding for .navbar-      fixed-top.        Change if height of navigation changes. */
    }

.navbar-fixed-top .navbar-brand {
    padding: 15px 0;
}
 .well {
    font-size:1.6em;
    text-align:center;
    text:#000;
    border:#000 solid 1px;
    border-radius:0;
    background-image:url(../images/metalsmall.png);
    background-image:no-repeat;
    background-size:contain;
    background-position:center
    padding:0;

    }
h1 {font-family:"arial";
        font-size:17px;
        font-weight:700;
    }

Answer 1

删除 .navbar div 的高度并将其添加到 navbar-header 而不是像这样：

.navbar-header {
    height:155px;
}

Bootstrap 当导航栏高度增加时，下拉菜单变得透明

Bootstrap Dropdown Menu becomes transparent when Navbar Height is increased

css

background

navbar

twitter-bootstrap

drop-down-menu