jQuery UI Resizable可影响引导网格列系统

如何解决jQuery UI Resizable可影响引导网格列系统

我从jsfiddle找到了一个很好的话题，标题是 jQuery UI Resizable仅影响列类。它说明了如何更改引导网格系统，以便可以调整其大小

这里是原始链接

https://codepen.io/delagics/pen/PWxjMN

我尝试修改原始代码只是为了将其从引导3.3.7迁移到4.0.0 a

这是我的代码：

https://jsfiddle.net/denisc/ty06zwo8/21/

问题在于，bootstrap 4 CSS的最新版本在网格系统上具有-ms-flex: 0 0 25%; flex: 0 0 25%;，但是旧版本没有flex:，而只有width:

在上面的jsfiddle链接上，它可以工作，但是当我尝试在localhost中的代码（包括所有引导程序编译的CSS和JS捆绑软件）时，flex仍从_grid-framework.scss显示

我不想更改引导程序代码中的任何内容。请帮我修改上面^ _ ^上的原始jQuery代码。我不了解整个jQuery代码如何使我的情况发生，只是将其迁移到引导程序的最新版本中。

$(function () {
var resizableEl = $(".resizable").not(":last-child"),columns = 12,fullWidth = resizableEl.parent().width(),columnWidth = fullWidth / columns,totalCol,// this is filled by start event handler
updateClass = function (el,col) {
el.css("width",""); // remove width,our class already has it
el.removeClass(function (index,className) {
return (className.match(/(^|\s)col-\S+/g) || []).join(" ");
}).addClass("col-sm-" + col);
};
// jQuery UI Resizable
resizableEl.resizable({
handles: "e",start: function (event,ui) {
var target = ui.element,next = target.next(),targetCol = Math.round(target.width() / columnWidth),nextCol = Math.round(next.width() / columnWidth);
// set totalColumns globally
totalCol = targetCol + nextCol;
target.resizable("option","minWidth",columnWidth);
target.resizable("option","maxWidth",(totalCol - 1) * columnWidth);
},resize: function (event,targetColumnCount = Math.round(target.width() / columnWidth),nextColumnCount = Math.round(next.width() / columnWidth),targetSet = totalCol - nextColumnCount,nextSet = totalCol - targetColumnCount;
// Just showing class names inside headings
target.find("h3").text("col-sm-" + targetSet);
next.find("h3").text("col-sm-" + nextSet);
updateClass(target,targetSet);
updateClass(next,nextSet);
}
});
});