Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 导航栏宽度一直延伸到滚动条_Html_Css_Twitter Bootstrap - Fatal编程技术网

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

Html 导航栏宽度一直延伸到滚动条,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我的引导导航栏一直延伸到滚动条,因此这导致滚动条位于导航栏后面。我已经检查了我的css代码,但我仍然不知道我的错误是什么 这是我的css代码: .navbar-right { float: right; } ul .navbar-right{ } #logo{ text-align: center; width: auto; } a { color: #00B4FF; text-decoratio

我的引导导航栏一直延伸到滚动条,因此这导致滚动条位于导航栏后面。我已经检查了我的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;
        }
    }

对不起,代码太长了。谁能帮我解决这个问题。

请用截图和HTML。JSFIDLE/bootply会更好。您确定滚动条来自
窗口吗?还是来自于它下面的
溢出:auto
div?如果是后者,很遗憾没有纯css的方法来实现这一点,因为滚动条是非标准宽度。你必须看看像@ICanHasKittenz这样的
JS
解决方案,我不能在这里发布任何图片,但这是屏幕截图@haxxxton的链接,我没有在css中设置溢出。它来自window@raaj5671这是引导navbar的默认行为,我建议您在内容之前留出
padding top
空间,如此处所示