Html Bootstrap 3.0.3粘贴-内容不是'；t在固定位置移动，并移动到其他内容的顶部

我有一个使用Bootstrap3.0.3构建的遗留应用程序。在这种情况下，我们不可能更新引导

也就是说，我正在尝试使用3.0.3来使用词缀功能

我在JSFIDLE上还设置了以下内容：

我想做的是在左侧有一个

.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">

当我运行此操作时，随着

粘贴

向左移动并与红色区域重叠

为什么会这样？我以为词缀是用来固定内容的

---

我做错了什么？

在您的小提琴中，当打开控制台时，它会给出消息

未捕获错误：引导需要jQuery

。当这个添加到其他脚本之上时，词缀将按预期工作

还要包裹需要固定的柱。更改：

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

...

致：

...

jquery也包括在内。我已经更新了fiddle（）以确保这一点——cdn的-jquery、bootstrap.js和bootstrap.css中包含了3个脚本。仍然不适合我。请在页面上的其他脚本之前尝试运行ung jQuery。。它现在在改变立场！蓝色区域移到红色区域的上方这是因为没有样式，无法知道div需要放置在何处。查看我的解决方案：我包装了需要滚动的div，因此父对象的位置保持不变。这样，插件就知道了滚动时元素的位置。那么，如果你不得不添加类并编写CSS来定位，那么Bootstrap中的整个

粘贴
过程有什么意义呢？我所希望的是，当用户向下滚动页面时，蓝色区域不会移动。你在那里所做的似乎奏效了，但我不理解词缀在其中的作用？它只在你写CSS来完成你想要的工作时才起作用？
<div class="col-md-4 tag-container">
  <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
  </div>
</div>