Bootstrap NavBar折叠菜单根据屏幕更改大小

Question

我对css不太满意，不知怎的，我设法修改了我的导航栏，无论屏幕尺寸有多大或多大，都可以通过在我的Site.css上添加这个按钮来显示可折叠按钮：

@media (max-width: 4000px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
    .navbar-form {
    width: 100%;
    }
}

现在我的导航栏按照我想要的方式行事，除了一件事：

当我单击可折叠按钮时，下拉菜单背景占据了屏幕的所有空间。我想要的是当用户在桌面上时，可折叠菜单仅采用特定宽度。我应该在css文件中更改什么？这是我想要的输出（仅限使用桌面时）：