javascript - jQuery 可调整大小的 div 与 Bootstrap 的不良行为

Question

我正在开发一个网络应用程序，我需要在页面右侧有一个能够调整大小的面板。我通过使用 jQuery UI 实现了这一点。但我的应用程序还需要使用 Bootstrap，我认为这就是问题所在:当我尝试调整它的大小时，它向左移动了一点。我不想要这种效果，有人可以帮助我吗？

Fiddle

要调整大小的框是从右到左的红色框。

$('.move').resizable({handles: 'w'});

Answer 1

使用此 css 属性 box-sizing:border-box 可调整大小的函数失败，因为在调整大小时它会忘记填充，并且此属性将填充合并到宽度。

因此，在调整大小时，每次开始调整大小时都会减少填充，并且 Bootstrap css 使用此属性。

使用此box-sizing:content-box

.move{
  position: absolute;
  width: 20%;
  height: 200px;
  bottom: 0;
  right: 0;
  border: 5px solid #f00;   
  margin-right: 0;
  box-sizing:content-box
}

这将覆盖此元素上的默认 Bootstrap CSS，并且可调整大小的功能将正常工作。

参见 fiddle :https://jsfiddle.net/DTcHh/23283/