Bootstrap 3.0.3 词缀 - 内容不在固定位置并移动到其他内容之上

Question

我有一个使用 Bootstrap 3.0.3 构建的旧版应用程序。在这种情况下，我们无法更新 Bootstrap。

也就是说，我正在尝试与 3.0.3 一起使用词缀功能。

我在 jsfiddle 上也设置了以下内容：https://jsfiddle.net/x8fc9opm/8/

我想做的是在左侧有一个.col-md-8（红色边框）区域，右侧有一个.col-md-4（蓝色边框）中的项目“库”。

左侧区域可能会变得很长，我希望即使用户向下滚动，蓝色区域也始终可见。

所以我在.col-md-4 中添加了以下内容：

<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

当我运行它时，affix 向左移动并与红色区域重叠！

这是为什么？我认为词缀旨在将内容固定到位。

我在这里做错了什么？

Answer 1

在您的小提琴中，当打开控制台时，它会给出消息Uncaught Error: Bootstrap requires jQuery。当它被添加到其他脚本之上时，词缀按预期工作。

还要包装需要保持固定的列。变化：

<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
</div>

收件人：

<div class="col-md-4 tag-container">
  <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
  </div>
</div>