html - 如何强制带边框的元素的宽度?

标签 html css twitter-bootstrap

我正在使用 Twitter Bootstrap对于我的页面布局,我想插入一个 CSS3 Box Shadow在专栏中。

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

如果我从列宽中减去 2px,它看起来正是我想要的。但是,我想利用 Bootstrap 的流畅布局(基于百分比而不是像素),所以没有简单的方法来简单地制作 <div>。比其他情况下窄 2 个像素。

我真的不喜欢边框不在元素宽度内的方式。有谁知道有办法得到我的 <div>即使有边框也要尊重当前宽度?

最佳答案

使用

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

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

这是一个示例,其中包含两个尺寸为 100x100 且边框为 20 像素的 div。第一个有'box-sizing',第二个没有:http://jsfiddle.net/y3zxC/ .

关于html - 如何强制带边框的元素的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10455434/

相关文章:

css - 使链接具有 100% 的宽度

css - Div 漂浮在 wrapper 内不显示

javascript - 我现在如何保存计数器值或 "Textbox"值,以便刷新后它将保持在那里

css - 向下滚动我的表的选项

jQuery Progressbar文本隐藏Progressbar的动画

javascript - 如何在具有相同类的多个文本框上将 readonly 属性设置为 false?

html - 在导航栏上定位社交图标

html - 如何制作具有多个图像的 Bootstrap 缩略图 slider ....?

javascript - 无法在 react jsx 值 Prop 中重复十六进制 html 实体

asp.net - 表格不显示 html 页面