问题描述
我从jsfiddle找到了一个很好的话题，标题是 jQuery UI Resizable仅影响列类。它说明了如何更改引导网格系统，以便可以调整其大小
这里是原始链接
我尝试修改原始代码只是为了将其从引导3.3.7迁移到4.0.0 a
这是我的代码：
问题在于，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);
}
});
});
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）