Bootstrap 4 使用简单的div col-md-6，引导和jsplumb端点出现奇怪的位置

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

守则：

$(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);


                }); 
            }
    });
  });    

$（文档）.ready（函数（）{
jsPlumb.ready（函数（）{
var firstInstance=jsplump.getInstance({
ConnectionsDetaccable:true
});
firstInstance.importDefaults（{
连接概述：[
[“箭头”，{
地点:1,，
id:“箭头”，
长度：20，
可折叠：0.4
} ]
]
});
var connectorType=[“笔直”{stub:[2,2]，间距：1，拐角半径：5，alwaysRespectStubs:true}]；
connectorPaintStyle={
冲程宽度：2，
笔划：“61B7CF”，
joinstyle:“圆形”，
“白色”，
大纲第1页第2页，
//dashstyle:“2 4”
};
connectorHoverStyle={
冲程宽度：3，
笔画：“216477”，
大纲图第1页第5页，
大纲：“白色”
};
端点悬停样式={
填写：“216477”，
笔划：“216477”
};
var sourcePoint={
端点：“点”，
画风：{
笔划：“7AB02C”，
填写：“7AB02C”，
半径：4，
冲程宽度：6
},
来源：是的，
isTarget:错，
connectorStyle:connectorPaintStyle，
hoverPaintStyle:endpointHoverStyle，
connectorHoverStyle:connectorHoverStyle，
最大连接数：10，
dragOptions:{}，
覆盖层：[
[“标签”{
位置：[0.5,1.5]，
标签：“拖动”，
cssClass:“endpointSourceLabel”，
可见：假
}
]
]
};
var targetPoint={
来源：错，
isTarget:没错，
最大连接数：10，
端点：“点”，
画风：{
笔画：“红色”，
填充：“红色”，
半径：4，
冲程宽度：6
},
};   
bind（'click'，函数（connection，e）{
firstInstance.deleteConnection（连接）；
});
bind（'connection'，函数（info）{
var con=信息连接；
var arr=firstInstance.select（{source:con.sourceId，target:con.targetId}）；
如果（arr.length>1）{
删除连接（con）；
}  
});
变量idST=1，y=150，leftY=150；
$（“#createSourceButton”）。单击（函数（e）{
$（“#createSourceButton”）.hide（）；
$（“#wordSource”）.hide（）；
$（“.sourceList”）.append（“”+$（“#wordSource”）.val（）+“”）；
/*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），{
主持人：“对”
}，震源点）；
$（“#”+idST）.on（'click'，函数（事件）{
$（this.remove（）；
deleteEndpoint（sourceEndPoint）；
}); 
/*重新计算偏移量（$（“#”+idST））；
重新绘制（$（“#”+idST））；
firstInstance.repaiverything（）*/
idST+=1；
左撇子+=50；
});  
$（“#createTargetButton”）。单击（函数（e）{
$（“#createTargetButton”）.hide（）；
$（“#wordTarget”）.hide（）；
$（“.targetList”）.append（'+$（'#wordTarget'）.val（）+''；
var targetEndPoint=firstInstance.addEndpoint（$（“#”+idST），{
主播：“左”
}，目标点）；
/*重新计算偏移量（$（“#”+idST））；
重新绘制（$（“#”+idST））；
firstInstance.repaiverything（）*/
$（“#”+idST）.on（'click'，函数（事件）{
//$（this）.parents（'div'）.eq（1）.remove（）；
//$（this.parent（）.parent（）.remove（）；
$（this.remove（）；
deleteEndpoint（targetEndPoint）；
}); 
idST+=1；
});  
$（“#保存”）。单击（函数（e）{
保存流程图（）；
});  
函数保存流程图（）{
//log（firstInstance.getAllConnections（））；
//log（firstInstance.selectEndpoints（））；
var connec