Bootstrap 下拉菜单太大

Question

我不明白为什么我的 bootstrap 下拉菜单似乎在顶部和底部多了一行——其中什么也没有。当然，我已经为所有分辨率设置了 150 像素的导航栏，但这并不能解释底部的额外填充。这是我的第一个 bootstrap 项目，我四处寻找答案。您必须将 window 缩小到小于 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

在网站中，修复了 header 的填充 .navbar-fixed-top .nav{60px 0px} 导致的问题。

所以解决方案是媒体查询

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

因此在移动设备等设备上，它将 over-ride 默认 .navbar-fixed-top .nav 选择器属性。

有关media-queries

的更多信息

Bootstrap 下拉菜单太大

Bootstrap Dropdown Menu too big

css

twitter-bootstrap

drop-down-menu