html - 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

在您的 fiddle 中，当打开控制台时，它会显示消息 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>