我有一个使用 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
向左移动并与红色区域重叠!
这是为什么?我认为词缀是为了固定内容而设计的。
我在这里做错了什么?
最佳答案
在您的 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>
关于html - Bootstrap 3.0.3 词缀 - 内容不在固定位置并移动到其他内容之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52182416/