jquery - 如何在 Bootstrap 中有一个固定的列？

Question

我用 Bootstrap 制作了一个页面，其中包含如下两列:

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-body">Fixed</div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">text</div>
            </div>
        </div>
    </div>
</div>

我想让第一列固定位置，以便它在滚动时保持不变，但另一列将是正常的并包含长文本。

我该怎么做？

DEMO

Answer 1

使用'affix'

试试这个:

<div class="container">
    <div class="row">
        <div class="col-md-3 ">
            <div class="panel panel-default affix">
                <div class="panel-body">Fixed</div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">text</div>
            </div>
        </div>
    </div>
</div>

DEMO