DEMO

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

Answer 2

以下是一些选项：

1）使用Bootstrap的Affix（感谢@Christina）

2）position:sticky - limited support

3）stickyjs - 一个简单的js lib

4）自定义烘焙自己的解决方案，例如：

$(window).scroll(function (event) {

  var offset = $(this).scrollTop();

  var target = $('div').offset().top

  if ( offset > target ) {
    // do stuff
  }
})

如何在Bootstrap中使用固定列？

2 个答案:

DEMO