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

问：

我从jsfiddle找到了一个很好的主题，标题是jQuery UI Resizable affect only on column classes。它解释了如何更改引导网格系统，以便可以调整其大小

这里是原始链接

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

我尝试修改原始代码只是为了将其从引导程序迁移到3.3.74.0.0

这是我的代码：

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代码中的任何一个，如何使它发生在我的案例中，只是为了将其迁移到bootstrap最新版本。

$(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, ui) {
var target = ui.element,
next = target.next(),
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);
}
});
});