Question

我试图设计一个带有左侧主要信息的bootstrap 3的页面，然后是右侧的一个小侧栏，其中包含与主要信息相关的其他链接和图形： http://www.bootply.com/ZLB46jDSnU

问题是如果我使用容器流体作为主体（第55行），即使侧边栏需要它，垂直滚动也消失了。如果我将容器流体更换为容器，一切都很好，但主体重叠我的侧边栏。给我的印象是流体布局是我想要的。

有人知道为什么会干扰滚动吗？我采取了错误的方法让侧边栏div独立于页面内容div？

Answer 1

得到了Skelly的帮助！

<div id="page-content-wrapper">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4" id="right">
                        <div class="panel panel-default ">
                            <div class="panel-heading">
                                <h3 class="panel-title">Shortcuts</h3>
                            </div>
                            <!--User details -->
                            <div class="panel-body">
                                <li><a href="#/milestones">Milestones --»</a></li>
                                <li><a href="#/appversions">Versions --»</a></li>
                                <li><a href="#/reportcsv">CSV Report --»</a></li>
                            </div>
                        </div>
                </div>
                <div class="col-sm-8" id="left">
                    <!--All apps -->
                    <div class="panel panel-default" ng-init="">
                        <!-- Default panel contents -->
                        <div class="panel-heading clearfix">
                            <b>Your Applications</b>
                         </div>
                        <div class="panel-body">
                            <table-here></table-here>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

带侧边栏的Bootstrap 3流体布局可防止垂直滚动

1 个答案: