Question

我想知道是否有更好的方法来折叠此页面上显示的导航栏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;
    }

提前感谢您的帮助

Answer 1

关于悬停，请使用填充：

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

要修复滚动条，只需覆盖.navbar-collapse

的最大高度

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

是否有更好的方法来折叠此导航栏

1 个答案: