如何在带边框的元素上强制使用宽度？

Question

我正在使用Twitter Bootstrap进行页面布局，并希望在列中插入CSS3 Box Shadow。

我唯一的问题是盒子阴影有一个1px的边框，这足以让我的第二列换行到下一行。如果我删除边框，它会很好地对齐。

如果我从列宽中减去2px，它看起来就像我想要的那样。但是，我想利用Bootstrap的流畅布局（基于百分比而非像素），因此没有简单的方法可以简单地使<div> 2像素比其他任何地方都窄。

我真的不喜欢边框不能保持在项目宽度内的方式。有没有人看到我的<div>尊重当前宽度的方法，即使有边框？

Answer 1

使用

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box; 

并且边框的宽度将添加到框内。

以下是两个具有100x100大小和20px边框的div的示例。第一个有'box-sizing'，第二个没有：http://jsfiddle.net/y3zxC/。