javascript - jQuery UI .resizable() 和 Bootstrap 冲突

Question

我检测到 jQuery 和 Bootstrap 3 之间存在冲突。

这个 jsFiddle 将显示:

http://jsfiddle.net/flashspys/S8eHJ/2/

重要的事情:

$(".textdiv").draggable({containment: "parent"}).resizable({handles: "all"});
…
.textdiv {padding: 10px;}

如果调整框的大小，您会注意到框有一点跳跃。此行为仅在包含 bootstrap.css 时存在。我发现这个效果取决于内部div的padding和border。如果你增加填充，盒子会跳得更厉害。

这个错误是已知的吗？我问过谷歌，但一无所获。

Answer 1

Bootstrap 正在将 box-sizing: border-box; 应用到您的 div。添加 box-sizing: content-box; 到你的 textdiv css 来修复它。

这是它的样子: http://jsfiddle.net/S8eHJ/3/