Question

我试图让两个侧柱保持固定，而中心的列可以滚动。虽然右侧的列保持固定，但我的左列内容不会粘在其范围内。它的内容溢出，它占据了整行。因为它是首先定义的，所以它出现在其他容器的后面。如何让它贴在左边而不是溢出？

<div class = "row">
        <div class=" container col-lg-2 col-md-2 col-sm2" id="left-sidebar">
                        <div class="panel panel-default affix">
                            <div class="panel-heading">Skill-Set</div>
                    <div class="panel-body" align="justify">

                    </div>
                <div class="well">
                    <ul class="nav ">

                </div>
                <!--/.well -->
            </div>
            </div>

        <div class="container col-lg-8 col-md-8 col-sm-8">
            <div class="jumbotron">
                <h2>Who am I?</h2>
                <p align="justify">Stuff
                </p>
            </div>
            <hr>
        </div>

        <div class=" container col-lg-2 col-md-2 col-sm2" id="right-sidebar">
            <div class="panel panel-default pull-right affix">
                    Stuff
                    </div>
                </div>
        </div>
    </div>

Answer 1

您需要在CSS中使用的是属性

overflow-y: auto / hidden

这是一个JSFiddle，向您展示如何通过使用CSS实现3列设计，2个固定和1个滚动。

两个固定列和一个可滚动的中心

1 个答案: