Bootstrap和jsplumb端点使用简单的div col-md-6显示奇怪的位置

Question

HY， 我有一个问题，jsplumb和bootstrap与div col一起工作， 我使用按钮动态创建源，目标和端点。 我创建源，它的端点是好的，然后我创建目标，端点出现在一个奇怪的位置。 已经在谷歌搜索，尝试重绘，但没有工作。 我做了一个小提琴：

Link to fiddle

代码：

$(document).ready(function() {

        jsPlumb.ready(function() {

            var firstInstance = jsPlumb.getInstance({
              ConnectionsDetachable:true
            });

            firstInstance.importDefaults({ 
                ConnectionOverlays : [
                    [ "Arrow", { 
                        location:1,
                        id:"arrow",
                        length:20,
                        foldback:0.4
                    } ]
                ]
            });

            var connectorType = ["Straight", { stub: [2, 2], gap: 1, cornerRadius: 5, alwaysRespectStubs: true }];

            connectorPaintStyle = {
                strokeWidth: 2,
                stroke: "#61B7CF",
                joinstyle: "round",
                outlineStroke: "white",
                outlineWidth: 2,
                //dashstyle: "2 4"
            };
            connectorHoverStyle = {
                strokeWidth: 3,
                stroke: "#216477",
                outlineWidth: 5,
                outlineStroke: "white"
            };
            endpointHoverStyle = {
                fill: "#216477",
                stroke: "#216477"
            };


            var sourcePoint = {  
              endpoint: "Dot", 
                paintStyle: {
                    stroke: "#7AB02C",
                    fill:"#7AB02C",
                    radius: 4,
                    strokeWidth:6
                },
                isSource: true, 
                isTarget:false, 
                connectorStyle: connectorPaintStyle,
                hoverPaintStyle: endpointHoverStyle,
                connectorHoverStyle: connectorHoverStyle,
                maxConnections: 10,                      
                dragOptions: {},
                overlays: [
                            ["Label", {
                                location: [0.5, 1.5],
                                label: "Drag",
                                cssClass: "endpointSourceLabel",
                                visible: false
                               }
                            ]
                        ]
                };


            var targetPoint = {  
              isSource:false, 
              isTarget:true , 
              maxConnections: 10,
                endpoint: "Dot",
                    paintStyle: {
                        stroke: "red",
                        fill:"red",
                        radius: 4,
                        strokeWidth:6
                },
            };   


            firstInstance.bind('click', function (connection, e) {
                firstInstance.deleteConnection(connection);          

            });


             firstInstance.bind('connection',function(info){
                 var con=info.connection;
                 var arr=firstInstance.select({source:con.sourceId,target:con.targetId});

                  if(arr.length>1){
                    firstInstance.deleteConnection(con);
                 }  
             });


            var idST=1,y=150 ,leftY=150;

            $("#createSourceButton").click(function (e) { 
                $("#createSourceButton").hide();
                $("#wordSource").hide(); 
                $(".sourceList").append('<div id ='+""+idST+' class="node1 box box1"  >'+ $('#wordSource').val() +'</div>'); 


                 /*   var sourceDiv = document.createElement('div');
                    sourceDiv.id = ""+idST;
                    sourceDiv.className = 'node1 box box1';
                    document.getElementsByClassName('sourceList')[0].appendChild(sourceDiv); 
                    sourceDiv.innerHTML = $('#wordSource').val();   

                */
                    var sourceEndPoint = firstInstance.addEndpoint($("#"+idST), { 
                        anchor:"Right"
                    },sourcePoint ); 

                     $("#"+idST).on('click',function(events){  
                        $(this).remove();
                        firstInstance.deleteEndpoint(sourceEndPoint);
                    }); 

                 /*   firstInstance.recalculateOffsets($("#"+idST)); 
                    firstInstance.repaint($("#"+idST));  
                    firstInstance.repaintEverything();*/
                    idST +=1;
                    leftY+=50; 
            });  

            $("#createTargetButton").click(function (e) { 
                                $("#createTargetButton").hide();
                $("#wordTarget").hide(); 
                $(".targetList").append('<div id ='+""+idST+' class="node2  box box2  "  >'+ $('#wordTarget').val() +'</div>');             

                    var targetEndPoint = firstInstance.addEndpoint($("#"+idST), { 
                      anchor:"Left" 
                    },targetPoint );                     
                   /* firstInstance.recalculateOffsets($("#"+idST)); 
                    firstInstance.repaint($("#"+idST)); 
                    firstInstance.repaintEverything();*/

                    $("#"+idST).on('click',function(events){ 
                      // $(this).parents('div').eq(1).remove();
                        //$(this).parent().parent().remove();
                        $(this).remove();
                        firstInstance.deleteEndpoint(targetEndPoint);
                    }); 

                    idST +=1;


           });  

            $("#save").click(function (e) {

                saveFlowchart();
            });  

            function saveFlowchart() {
                // console.log(firstInstance.getAllConnections()); 
                // console.log(firstInstance.selectEndpoints()); 

                var connections = []; 
                var score= 0;
                $.each(firstInstance.getAllConnections(), function (idx, connection) {  

                    console.log(connection.sourceId +" - " + connection.targetId);
                    console.log(connection.source.innerText +" - " + connection.target.innerText);


                }); 
            }
    });
  });    

感谢