是否有更好的方式來瓦解這個導航欄

我想知道是有更好的方法來瓦解這個頁面http://reportalert.info/index-test.php 是否有更好的方式來瓦解這個導航欄

上顯示導航欄，因爲當它崩潰它分裂成兩行，它看起來並不好，因爲每個列表項右側的邊界。有沒有一種方法可以讓列表項在摺疊時出現在同一行上，或者有另一種方式可以讓它在更小的屏幕上查看時看起來更好。

此外，當懸停在鏈接上它不像導航欄一樣高度，我試着改變填充，但是在移動佈局上創建了一個垂直滾動條，我該如何解決這個問題。

下面是我對導航欄的代碼：

.navbar-default { 
    background-color: #fff; 
    background-image: -moz-linear-gradient(top, #B0B0B0, #797979); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B0B0B0), to(#797979)); 
    background-image: -webkit-linear-gradient(top, #B0B0B0, #797979); 
    background-image: -o-linear-gradient(top, #B0B0B0, #797979); 
    background-image: linear-gradient(to bottom, #B0B0B0, #797979); 
    background-repeat: repeat-x; 
    border:0; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B0B0B0', endColorstr='#797979', GradientType=0); 
    *zoom: 1; 
    *display: inline; 
    } 

.navbar-default .navbar-nav > li { 
    padding:0 8px; 
    border-right:1px solid #bbb; 
    font-size:19px; 
    color:#f7f7f7; 
    font-family: 'RBNo21b-Book'; 
    text-decoration:none; 
    font-weight:bold; 
    letter-spacing:1px; 
    } 

.navbar-default .navbar-nav > li > a { 
    padding:13px 19px 15px 19px; 
    } 

.navbar-default .navbar-nav > li:hover {  
    background-image: -moz-linear-gradient(top, #797979, #B0B0B0); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#797979), to(#B0B0B0)); 
    background-image: -webkit-linear-gradient(top, #797979, #B0B0B0); 
    background-image: -o-linear-gradient(top, #797979, #B0B0B0); 
    background-image: linear-gradient(to bottom, #797979, #B0B0B0); 
    background-repeat: repeat-x; 
    border:0; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#B0B0B0', GradientType=0); 
    *zoom: 1; 
    *display: inline; 
    color:#fff; 
    padding:0 8px; 
    border-right:1px solid #bbb; 
    }

在此先感謝您的幫助

來源

2014-01-05 abk92

對不起，我對你的問題有點不清楚，通過崩潰你在說下拉菜單嗎？你能提供一個jsfiddle，重新創建具體問題嗎？ –

我認爲OP意味着在瀏覽器放大和縮小的情況下崩潰。我建議不要使用縮放屬性，除非你的目標是和那些使用IE 6的人一起工作（沒有多少人仍在使用它）。 – BuddhistBeast

我的意思是，當你重新調整瀏覽器的大小時，導航欄會分成兩行，但是因爲每個列表項右側都有一個邊框，所以在重新調整瀏覽器窗口大小時，它看起來不太好。我想知道是否有一種方法可以使列表項保留在同一行上。 – abk92

關於徘徊，走的路與填充：

.navbar-default .navbar-nav > li > a { 
    padding:15px 19px 15px 19px; 
}

修復滾動條只是覆蓋.navbar-collapse的最大高度

.navbar-collapse { 
    max-height: 100%; 
}

來源

2014-01-05 21:29:18

是否有更好的方式來瓦解這個導航欄

回答

相關問題