jQuery UI：如何根据列动态设置resizable（）

Question

我正在调整col-md-6上的列的大小但是如果我想调整col-md-4，col-md-3等上的列的大小。我必须根据cols手动设置脚本。我想知道如何动态设置脚本。

这是我的代码：

var innerDiv1 = $( '.col-md-6' );            
              innerDiv1.resizable({
                handles: 'e',
                minWidth : 430,
                maxWidth : 900,
                resize: function( event, ui ) {
                  var remainingSpace = $(this).parent().width() - $(this).outerWidth(true);
                  console.log('Remaining Space = '+remainingSpace);
                  var divTwo = $(this).next();
                  console.log('Div Two = '+divTwo);
                  var divTwoWidth = remainingSpace - ( divTwo.outerWidth(true) - divTwo.width() );
                  console.log('Div Two Width = ' + divTwoWidth);
                  divTwo.css( 'width', divTwoWidth + 'px' );
                }
              });

这是我的fiddle与col-md-6

更新：fiddle col-md-4，fiddle col-md-3分别为col-md-4和col-md-3

问题是在col-md-4和col-md-3中，当我调整最后一个或第二个cols时，它会自动降低它的原因！

为此我必须在最大宽度和最小宽度上进行变换。我想让它充满活力。我希望你理解

如何动态设置每个列的最大和最小宽度 - *

尝试从东侧调整列的大小