html - 如何在有边框的元素上强制宽度？

Question

我正在使用Twitter Bootstrap进行页面布局，并且我想在列中插入CSS3 框阴影。

我遇到的唯一问题是盒子阴影有一个 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/。