导航栏宽度一直延伸到滚动条

时间:2014-05-26 05:52:27

标签: html css twitter-bootstrap

我的引导程序导航栏一直延伸到滚动条,因此这会导致滚动条位于导航栏后面。我检查了我的CSS代码,但我仍然不知道我的错误是什么。

这是我的css代码:

   .navbar-right {
    float: right;
    }

    ul .navbar-right{
    }

    #logo{
    text-align: center;
    width: auto;
    }

    a {
    color: #00B4FF;
    text-decoration: none;
    }

    .navbar {
     box-shadow: /* Shadow beneath the bar and edge highlights. */ /* Layered single pixel              shadows to create a one sided shadow effect. */ 0 5px 0 0 rgba(0, 0, 0, 0.01), 0 4px 0 0 rgba(0, 0, 0, 0.02), 0 3px 0 0 rgba(0, 0, 0, 0.04), 0 2px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.08), /* Top highlight */ 0 1px 0 0 rgba(255, 255, 255, 0.1) inset, /* Left highlight */ 1px 0 0 0 rgba(255, 255, 255, 0.1) inset, /* Right highlight */ -1px 0 0 0 rgba(255, 255, 255, 0.1) inset, /* Bottom lowlight */ 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.05) 50%, rgba(0,0,0, 0.02) 51%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.02) 51%);
    background-size: 100%;
    background-repeat: no-repeat;
    border: none;
    width: 100%;
    left: auto;
    right: auto;
    }

    .navbar-default {
    background-color: black;
    border-color: #ff1859;
    height: 50px;
    width: 100%;
    }



    .navbar-nav {
    margin: 0;
    }



   .navbar-default .navbar-nav>li>a {
   color: #fff;
   }

   .navbar-default .navbar-nav>li>a:hover{
   color: #00B4FF;
}


.navbar .sb-toggle-left {
    width: 58px;
    float: left;
    padding: 14px;  
}


.sb-slidebar .sb-left{
    width: 253px;
    height: 314px;
}

.sb-slidebar {
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 0;
}

.sb-slidebar {
    background-color: #222222;
    visibility: hidden;
}

@media (min-width: 1199px) {
    ul.navbar-nav {
        display: block;
    }

    #logo {
        text-align: center;
    }
}



#logo {
    margin-top: 4px;
    text-align: center;
}

    @media (min-width: 768px){
        #logo {
            text-align: left;
        }
        ul.navbar-nav {
            display: block;
        }
    }

很抱歉长代码。任何人都可以帮我解决这个问题。

0 个答案:

没有答案