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

Question

我发现当我减小浏览器的宽度以匹配移动设备屏幕的尺寸时，包含div的{​​{1}}和包含内容的另一个row-offcanvas确实存在带滚动条的小宽度。

这是fiddle with my code

这是我的HTML：

row

这是我的css：

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

更新：

我已更改为 body{ padding-top:60px; } #sidebar { height:100%; } ，并将navbar-static-top height添加到100%和body。 对于sidebar，我更改为col-xs-12而不是col-xs-4。 我仍然发现在移动宽度时，容器不占用窗口的高度（除了已经采取的内容），是因为内容也在同一行内。

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

UPDATE2：

我将主页内容移动到另一个#sidebar container希望解决问题，但同样的问题继续困扰着我。

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

将col-xs-12用于移动视图