Javascript 使用offcanvas时xs网格中的引导行高度

我发现，当我减小浏览器的宽度以匹配移动屏幕的尺寸时，包含画布上

行的
div
和另一个包含内容的
行的
的宽度非常小，带有一个滚动条

这是一个

这是我的html：

      <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Fargo</a>
        </div>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <!--Add stuff here-->
        </div>          
    </div>      
</nav>
    <div class="container">
        <div class="row row-offcanvas row-offcanvas-left">
            <div id="sidebar" role="navigation" class="col-xs-4 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="text-primary">Panel 1</span>
                            <a href="#p1" class="accordion-collapse" data-toggle="collapse" data-target="#p1" data-parent="#accordion">
                                <i class="glyphicon glyphicon-chevron-down"></i>
                            </a>
                        </div>
                        <div id="p1" class="collapse panel-collapse in">
                            <div class="panel-body">
                                There is a table of details to be placed here
                            </div>  
                        </div>  
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="text-primary">Panel 1</span>
                            <a href="#p2" class="accordion-collapse" data-toggle="collapse" data-target="#p2" data-parent="#accordion">
                                <i class="glyphicon glyphicon-chevron-down"></i>
                            </a>
                        </div>
                        <div id="p2" class="collapse panel-collapse in">
                            <div class="panel-body">
                                There is a table of details to be placed here
                            </div>  
                        </div>  
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="text-primary">Panel 1</span>
                            <a href="#p3" class="accordion-collapse" data-toggle="collapse" data-target="#p3" data-parent="#accordion">
                                <i class="glyphicon glyphicon-chevron-down"></i>
                            </a>
                        </div>
                        <div id="p3" class="collapse panel-collapse in">
                            <div class="panel-body">
                                There is a table of details to be placed here
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>
            <div class="col-xs-12 col-sm-8 col-md-8 col-lg-9">
                <div class="visible-xs">
                    <button class="btn btn-primary btn-xs" data-toggle="offcanvas">
                        Toggle Menu
                    </button>
                </div>
                content
            </div>  
        </div>  
    </div>  

更新：
我改为
navbar static top
，并在
body
和
sidebar
中添加了
height
的
100%
。
对于
#侧栏
，我改为
col-xs-12
，而不是
col-xs-4
。
我仍然发现，在移动宽度下，容器没有占据窗口的高度（除了已拍摄的内容），这是因为内容也在同一行内

考虑到所有这些变化

更新2：
我将主页内容移动到另一个
容器
div
中，希望解决这个问题，但同样的问题继续困扰着我

试试这个：

 <div style="margin-top:50px" class="container">
        <div class="row row-offcanvas row-offcanvas-left">
            <div id="sidebar" role="navigation" class="col-xs-12 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">



将
col-xs-12
用于移动视图
我发现
navbar static fixed
仍与
容器重叠
。我将其进一步剥离，移除
容器
，更改为
col-xs-12
，并更改为
navbar static top
，但问题仍然存在，是的，我看到你应该使用
margin-top
来放置在导航栏旁边的容器看到我更新的帖子，希望我的帖子能解决你的问题我看到当你添加
margin-top
然后添加
高度：100%
到
容器和
主体时，我仍然发现在移动宽度上，
容器
没有占据
窗口的高度（除了已拍摄的内容），是不是因为内容也在同一行内，我尝试将主页内容移动到一个单独的
容器
，它有自己的
行
。这不会产生任何差异。实际上，在fiddle中，它工作不正常！在你自己的解决方案中尝试一下
 <div style="margin-top:50px" class="container">
        <div class="row row-offcanvas row-offcanvas-left">
            <div id="sidebar" role="navigation" class="col-xs-12 col-sm-4 col-md-4 col-lg-3 sidebar-offcanvas">