Html 引导布局:内容不填充浏览器

Html 引导布局:内容不填充浏览器,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我有一个带有侧边栏的管理屏幕。除了主要内容没有填满浏览器的宽度外,所有内容都运行良好。我尝试了很多选择,但我无法解决这个难题。非常感谢您的帮助和建议 这是我的HTML <!-- top navigation menu element --> <div id="wrap"> <div class="container-fluid"> <div class="row r

我有一个带有侧边栏的管理屏幕。除了主要内容没有填满浏览器的宽度外,所有内容都运行良好。我尝试了很多选择,但我无法解决这个难题。非常感谢您的帮助和建议

这是我的HTML

        <!-- top navigation menu element -->
        <div id="wrap">
            <div class="container-fluid">

                <div class="row row-offcanvas row-offcanvas-left">
                    <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation">
                        <ul class="nav nav-sidebar">
                           <li id="departments">
                             <i class="fa fa-fw fa-sitemap"></i> <span>Departments</span>
                           </li>
                           <li id="permissions">
                              <i class="fa fa-fw fa-key"></i> <span>Permissions</span> </a>
                            </li>
                          </ul>
                    </div><!-- .col-sm-3 .col-md-2 .sidebar-offcanvas -->

                    <div class="col-sm-9 col-md-10 main">
                        <!--toggle sidebar button-->
                        <p class="visible-xs">
                            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </button>
                        </p>

                        <h1 class="page-header inline-page-title">Groups</h1>

                        <!-- main content -->

                    </div><!-- .col-sm-9 .col-md-10 .main -->
                </div> <!-- .row .row-offcanvas .row-offcanvas-left -->
            </div><!-- .container-fluid -->
        </div> <!-- #wrap -->
更清晰的图像显示右侧的间隙-

发现了问题-正是这段CSS导致了问题。我删除了它,它工作得很好-但留给我另一个问题。如何约束左侧导航栏的宽度而不失去响应特性?如有任何建议,我们将不胜感激

    @media only screen 
and (min-width : 1200px) {
    .sidebar-offcanvas {
        width: 180px;
    }
}

试着从Main中删除任何填充和边距。你能在上面贴一把小提琴吗?此外,正如@colonelsanders所提到的,在.main上添加填充将与默认的引导col填充相混淆。相反,尝试用.main.Fiddle在这里包装col中的内容-你必须全屏显示,并将浏览器窗口和结果窗口拉伸到最大,才能看到问题。删除此窗口的宽度。画布侧边栏{width:180px;}影响引导类感谢Vitorino-我刚刚意识到这一点。但请看我下面的问题。有没有办法限制侧边菜单的宽度而不失去响应性?
    @media only screen 
and (min-width : 1200px) {
    .sidebar-offcanvas {
        width: 180px;
    }
}