javascript - 使用 offcanvas 时 xs 网格中的 Bootstrap 行高

Question

我发现当我减小浏览器的宽度以匹配移动屏幕的尺寸时，div 包含 row-offcanvas 和另一个 行 有内容的宽度非常小，带有滚动条。

这是一个 fiddle with my code

这是我的 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>  

这是我的CSS:

 body{
    padding-top:60px;   
}
#sidebar
{
    height:100%;
}

更新:

我更改为 navbar-static-top 并将 100% 的 height 添加到 body 和 侧边栏。对于 #sidebar，我将 col-xs-4 更改为 col-xs-12。我仍然发现在移动宽度下，容器不占据窗口的高度(除了已经被占用的)，是不是因为内容也在同一行内。

Here is an updated fiddle考虑到所有这些变化。

更新2:

我将主页内容移动到另一个 container div 希望能解决问题，但同样的问题仍然困扰着我。

This is an updated fiddle to reflect this

Answer 1

试试这个:

 <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">

为移动 View 使用col-xs-12