Question

我无法弄清楚为什么我的引导下拉菜单似乎在顶部和底部有一条额外的线 - 其中没有任何内容。当然，我已经为所有分辨率制作了导航栏150px，但这并不能解释底部的额外填充。这是我的第一个bootstrap项目，我已经搜索了高低，以获得答案。您必须将窗口缩小到小于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

的更多信息

Bootstrap下拉菜单太大了

1 个答案: