Bootstrap 下拉菜单太大

Question

我无法弄清楚为什么我的引导下拉菜单顶部似乎有一条额外的线，底部有一条线——其中没有任何内容。当然，我已经为所有分辨率设置了 150 像素的导航栏，但这并不能解释底部的额外填充。这是我的第一个引导项目，我一直在寻找答案。您必须将窗口缩小到小于 767 像素才能显示下拉选项。

这是页面：http://www.ashlandlockandsafe.com/index3.html。

在 CSS 中，我尝试使用以下方法解决它：

@media screen and (max-width: 767px) {
.navbar-header{
    height:150px;
}

.navbar-brand, .navbar-nav > li > a {
    line-height: 30px;
    height: 45px;
    padding: 0px;
    margin-top:0px;
    margin-left:10px;
}

.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;

 }
.carhelp {
    margin-top:15px;
}

h1 {
text-align: center;
font-size: 30px;
    }

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

但它的顶部和底部仍然有一个额外的行。任何想法如何解决下拉本身？

Answer 1

在网站中，固定标题有一个填充 .navbar-fixed-top .nav{60px 0px} 导致问题。

所以解决方案是媒体查询

@media (max-width: 480px) {
    .navbar-fixed-top .nav {
        padding: 0px 0px;
    }
}

在移动设备等设备上，它将覆盖默认的 .navbar-fixed-top .nav 选择器属性。

更多关于media-queries的信息