Bootstrap - 为什么:行删除margin-left&不是排液

时间:2013-03-28 08:25:14

标签: css twitter-bootstrap margin

行: margin-left: -20px;

排液:margin-left无关。

为什么row-fluid没有通过某个margin-left删除此%

编辑:
.row-fluid> .span正在添加margin-left

2 个答案:

答案 0 :(得分:4)

您可以在此处找到有关Bootstrap流体方面的更多信息:http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

这是因为<span>内封装的.row代码有margin-left: 20px。负左边距是为了对抗这一行,以便正确显示行。使用.row-fluid > span关系时,该封装中的span标签不会有左边距,因此不需要在.row-fluid

内更正

答案 1 :(得分:3)

这很难解释,你的答案是粗体,其余的是上下文。

静态布局时的逻辑是什么?

span个元素margin-left: 20px与其他span分开。

row元素有margin-left: -20px,以确保位于“左栏”的第一个span - 或任何span位于{{}的开头{1}}。

这是有效的,因为静态container尚未设置其row,因此width不会将宽度减去元素,继续填充其祖先。

流体布局会发生什么?

我们可以尝试相同的逻辑,但区别在于margin-left: -20pxwidth margin-left元素以百分比定义,所以如果我们增加实际宽度span元素(通过应用否定的row),这些margin元素也会增加其大小,因此它们不适合span < / p>

因此,流畅的布局使用不同的技术来实现类似的结果,只需将container应用于margin-left: 0

深入挖掘

为什么不在两种布局中使用相同的策略?当然,这将简化实现,但静态技术(不适用于流体)更强大。这是因为任何属于“左列”的元素,无论是否为:first-child,都将成为“保证金修正”。静态布局需要这种行为来舒适地提供响应性,流体布局可以在没有它的情况下进行更多或更少的管理。