Twitter Bootstrap - 边框
Posted
技术标签:
【中文标题】Twitter Bootstrap - 边框【英文标题】：Twitter Bootstrap - borders 【发布时间】：2012-02-06 07:26:15 【问题描述】：我刚开始使用 Twitter Bootstrap，我有一个关于如何最好地为父元素添加边框的问题？
例如，如果我有
<div class="main-area span12">
<div class="row">
<div class="span9">
//Maybe some description text
</div>
<div class="span3">
//Maybe a button or something
</div>
</div>
</div>
如果我像这样应用边框：
.main-area
border: 1px solid #ccc;
由于边框的宽度增加，网格系统将中断并将span3 踢到下一行......有没有一种好方法可以向父级添加边框或填充等内容<div>s 这样吗？
【问题讨论】：
【参考方案1】：如果您在 GitHub 上查看 Twitter 自己的 container-app.html 演示，您将获得一些关于在其网格中使用边框的想法。
例如，下面是提取的部分构建块到它们的 940 像素宽 16 列网格系统：
.row
zoom: 1;
margin-left: -20px;
.row > [class*="span"]
display: inline;
float: left;
margin-left: 20px;
.span4
width: 220px;
为了允许在特定元素上设置边框，他们在页面中添加了嵌入式 CSS，从而将匹配类减少了足够多的数量以考虑边框。
例如，为了允许侧边栏上的左边框，他们在主 <link href="../bootstrap.css" rel="stylesheet"> 之后的 <head> 中添加了这个 CSS。
.content .span4
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
您会看到他们将padding-left 减少了1px，以允许添加新的左边框。由于此规则出现在源顺序的后面，因此它会覆盖任何先前或外部声明。
我认为这并不是最强大的或优雅方法，但它说明了最基本的示例。
【讨论】：
如何使用“边距：-1px;”对于“边框：1px ...” 相当老的解决方案。不适用于当前的引导程序版本。【参考方案2】：我今晚遇到的另一个解决方案可以满足我的需求，它是添加 box-sizing 属性：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
这些属性强制边框成为盒子模型的宽度和高度的一部分，并且也纠正了这个问题。
根据caniuse.com » box-sizing，IE8+支持box-sizing。
如果您使用的是 LESS 或 Sass，则可以使用 Bootstrap mixin。
少：
.box-sizing(border-box);
萨斯：
@include box-sizing(border-box);
【讨论】：
如果你使用 Twitter Bootstrap 和他们的 LESS css 实现，实际上有一个混合。.box-sizing(border-box);
宽宏大量的 El Goog 说 version 8 and up（91% 支持）。
很棒的解决方案。对此表示赞赏
您能否澄清一下：该样式应应用于哪个元素？助教
最简单的答案是将这些属性放在它们自己的 CSS 类中，例如 border-boxed。然后将它们应用于要添加边框的任何 .span 元素。例如，我可以有一个
以上是关于Twitter Bootstrap - 边框的主要内容，如果未能解决你的问题，请参考以下文章
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：边框表格
覆盖 twitter bootstrap Textbox Glow and Shadows
吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片