Question

我不是很有经验，但我确实擅长发现问题。我的bootstrap导航栏需要高150像素才能容纳更大的徽标图像。当我将高度组件放入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;
    }

Answer 1

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

.navbar-header {
    height:155px;
}

当Navbar Height增加时，Bootstrap Dropdown Menu变为透明

1 个答案: