Question

我有一个让我发疯的问题。我想开始使用jsPlumb。所以我只是复制了他们的demo draggableConnectors并添加了一些bootstrap导航栏。如果我使用navbar-fixed-top＆lt; - 没有填充，一切运行良好，除非我可以将我的元素拖动到我的导航栏后面没有滚动条...所以我改为navbar-static-top，现在通过bootstrap应用填充。我的锚点和端点被从示例div中拉开。并且锚点被拉开与导航栏完全相同的高度。但是我想使用自举网格系统，并且左边或右边的所有填充都应用于锚点/端点，所以如果我向元素添加一个col-lg-2，所有锚点/端点都会被绘制得很远的col-lg-2来自元素。疯狂的是，如果我抓住一些元素并移动它，它会跳到远离我光标的锚点......任何想法？我在这个问题上工作了好几个小时。

Bootstrap Navbar：

<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

尝试使用.navbar将div陷入position: relative并提供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

JsPlumb：引导导航栏填充后错误的锚点位置

1 个答案: