我不是很有经验,但我确实善于发现问题。 我的 bootstrap 导航栏需要 150px 的高度来容纳更大的标志图像。当我将高度组件放入 CSS 并将窗口调整为 767 像素以下时,下拉菜单失去背景颜色并变得透明——使文字/链接无法看到。如果我从 CSS 中删除高度,菜单会返回,但高度不正确。我已经为此苦苦思索了几个小时,需要一些想法。你可以在http://www.ashlandlockandsafe.com/index3.html看到它(调整窗口大小以查看问题)。
.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;
}
最佳答案
从 .navbar
div 中删除高度并将其添加到 navbar-header
而不是像这样:
.navbar-header {
height:155px;
}
关于css - 当导航栏高度增加时,Bootstrap 下拉菜单变得透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32290261/