2015-08-31 199 views
0

我不明白爲什麼我的引導程序下拉菜單似乎有一個額外的行上和行底部 - 沒有任何內容。當然,我已經爲所有分辨率製作了我的導航欄150px,但這並不能解釋底部的額外填充。這是我的第一個引導項目,我已經搜索了高和低的答案。您必須將窗口縮小到小於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; 
} 

但它仍然有似乎是在頂部和底部的一個額外的行。任何想法如何解決下拉本身?

+0

也許我'盲目的,但我沒有看到任何網頁上的下拉列表?你能進一步解釋嗎? – jakob

+0

將窗口縮小爲移動大小。 – Linda

回答

1

在網站中,固定標題有一個填充.navbar-fixed-top .nav{60px 0px}導致該問題。

這樣的解決方案是媒體查詢

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

等等的移動設備,它會過度乘坐默認.navbar-fixed-top .nav選擇屬性。

更多有關media-queries

+0

非常感謝!你已經度過了我的一天!現在就像魅力一樣。 – Linda