Twitter bootstrap jsPlumb和Bootstrap网格_Twitter Bootstrap_Jsplumb

Twitter bootstrap jsPlumb和Bootstrap网格

twitter-bootstrap

Twitter bootstrap jsPlumb和Bootstrap网格,twitter-bootstrap,jsplumb,Twitter Bootstrap,Jsplumb,为什么jsPlumb不能与引导网格一起工作？我试图让jsPlumb在使用引导网格的HTML页面上的小部件之间绘制箭头我在下面包含的代码呈现了一些完全出乎意料的东西。我正在用Firefox来测试这一点如果我将div:A、B和C移动到一个表中，那么它看起来是正确的您混合使用jQuery库3.2.1和1.9.1，并且使用的是旧版本的jsplumb jsPlumb.readyfunction{ 普通变量={ 连接器：[流程图]，主播：[左，右]，终点：点 }; jsPlumb.connect

为什么jsPlumb不能与引导网格一起工作？我试图让jsPlumb在使用引导网格的HTML页面上的小部件之间绘制箭头

我在下面包含的代码呈现了一些完全出乎意料的东西。我正在用Firefox来测试这一点

如果我将div:A、B和C移动到一个表中，那么它看起来是正确的

您混合使用jQuery库3.2.1和1.9.1，并且使用的是旧版本的jsplumb

jsPlumb.readyfunction{ 普通变量={ 连接器：[流程图]，主播：[左，右]，终点：点 }; jsPlumb.connect{ 资料来源：A，目标：B }，普通； jsPlumb.connect{ 资料来源：A，目标：C }，普通； }; 图解容器{ 填充：20px；宽度：80%；高度：400px；边框：1px纯色灰色； } .项目{ /*高度：80px*/ 宽度：80px；边框：1px纯蓝色； /*浮动：左*/ 利润率：50像素； } A. B C

<!DOCTYPE html>
<html ng-app="">
<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #diagramContainer {
            padding: 20px;
            width:80%; height: 400px;
            border: 1px solid gray;
        }

        .item {
            /*height:80px; */
            width: 80px;
            border: 1px solid blue;
            /*float: left;*/
            margin:50px;
        }
    </style>
</head>
<body>    
    <div id="diagramContainer">
        <div class="row">
            <div class="col-sm-4">
                    <div id="A" class="item">A</div>

            </div>
            <div class="col-sm-4">
                    <div id="B" class="item">B</div>

            </div>
        </div>
        <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                <div id="C" class="item">C</div>
                </div>
        </div>
    </div>


    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>

    <script>
        jsPlumb.ready(function() {
            var common = {
                connector: ["Flowchart"],
                anchor: ["Left", "Right"],
                endpoint:"Dot"
            };

            jsPlumb.connect({
                source:"A",
                target:"B"
            }, common);
            jsPlumb.connect({
                source:"A",
                target:"C"
            }, common);
        });
    </script> 

</body>
</html>