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>