JsPlumb:在引导导航栏填充之后，锚点位置错误

Question

我有一个让我发疯的问题。我想开始使用jsPlumb。所以我只是复制了他们的演示draggableConnectors，并添加了一个小的引导导航栏。如果我使用navbar -fixed top <-没有填充，除了我可以在没有滚动条的情况下将我的元素拖到导航栏后面之外，所有的工作都很好。因此，我将其更改为navbar-static-top，现在通过bootstrap应用填充。我的锚点和端点从示例div中提取出来。锚的高度和导航杆一样高。但是我想使用bootstrap网格系统，并且所有向左或向右的填充都应用于锚点/端点，所以如果我向元素添加一个col lg-2向左，所有锚点/端点都会被绘制到远离元素的col 2位置。疯狂的是，如果我抓住一些元素并移动它，它就会跳到远离光标的锚点上……有什么想法吗？我花了几个小时来解决这个问题。

引导导航栏：

<nav class="navbar navbar-default navbar-static-top"></nav>

Css：

.scrollbars{
      height: 80vh;
      position: relative;
      overflow: scroll !important;
    }


 .drag-drop-demo .window {
    ....        
    position: absolute;
    ....
  }

这里有一个错误的例子：https://jsfiddle.net/f5bxgzLu/我不能摆脱这个错误，你能给我一些帮助吗？

Answer 1

尝试使用position: relative捕获div中的.navbar，并给出position:absolute

https://jsfiddle.net/nitincool4urchat/f5bxgzLu/27/

HTML

<div class='bar-container'>
<nav class="navbar navbar-default"></nav>
</div>

CSS

.bar-container{
    position: relative;
}
.navbar{
    position: absolute;
}

参考文献：

Bootstrap fixed navbar inside div