twitter-bootstrap Bootstrap - 为什么：Row 删除 margin-left 而不是 Row-fluid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15677137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Why: Row remove margin-left & not Row-fluid
提问by Slake
Row :margin-left: -20px;
排 ：margin-left: -20px;
Row-fluid :nothing about margin-left.
Row-fluid ：与margin-left.
Why row-fluid is not removing this margin-leftby a certain %?
为什么排液不删除此margin-left受到了一定%？
Edit :.row-fluid> .spanis adding margin-left.
编辑：.row-fluid>.span正在添加margin-left.
采纳答案by albertedevigo
That's hard to explain, your answer is in bold, the rest is context.
这很难解释，你的答案是粗体，其余的是上下文。
What's the logic when in static layout?
静态布局时的逻辑是什么？
The spanelements have margin-left: 20pxto stay separated from other spans.
该span元件具有margin-left: 20px远离分开span秒。
The rowelement has margin-left: -20pxto ensure that the first span-or any spanplaced at the "left column"- is placed at the begining of the container.
该row元素必须margin-left: -20px确保第一个span- 或任何span放置在“左列”的元素- 放置在container.
It works because the static rowhas not set its width, so that margin-left: -20pxdoes not substract width to the element, that continues filling its ancestor.
它起作用是因为静态row没有设置它的width，所以margin-left: -20px它不会减去元素的宽度，继续填充它的祖先。
What happens in a fluid layout?
在流体布局中会发生什么？
We could try the same logic, but the difference is that the widthand margin-leftof spanelements is defined in percents, so if we increase the actual width of the rowelement (by applying a negative margin), these spanelements also increase its size, so they don't fit within the container.
我们可以尝试同样的逻辑，但不同的是，width和margin-left的span元素在百分比定义的，所以如果我们增加的实际宽度row元素（通过施加负margin），这些span元素也增加它的大小，所以他们不适合在container.
So fluid layout uses a different technique for achieving a similar result, just applies a margin-left: 0to the :first-child.
因此，流体布局使用实现了类似的结果，不同的技术，只是一个适用margin-left: 0的:first-child。
Digging deeper
深层发掘
And why not use the same strategy in both layouts? Sure, that will simplify the implementation, but the static technique (that is not applicable to fluid) is more powerful. That's because any element that falls in the "left column", being :first-childor not, will became "margin-corrected". Static layouts need that kind of behaviour to comfortably providing responsiveness, fluid layouts can -more or less- manage without it.
为什么不在两种布局中使用相同的策略？当然，这将简化实现，但静态技术（不适用于流体）更强大。这是因为落入“左列”的任何元素，:first-child无论是否存在，都将成为“边距校正”。静态布局需要这种行为来舒适地提供响应能力，流体布局可以或多或少地在没有它的情况下进行管理。
回答by Luke Smith
You can find out more about the fluid aspects of Bootstrap here: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
您可以在此处找到有关 Bootstrap 流畅方面的更多信息：http: //twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
It's because <span>tags ecapsulated within .rowhave a margin-left: 20px. The negative left margin is to counter this so that the row displays correctly. With the .row-fluid > spanrelationship, span tags within that encapsulation don't have a left margin therefore this doesn't need to be corrected within .row-fluid
这是因为<span>封装在其中的标签.row具有margin-left: 20px. 负左边距是为了抵消这一点，以便该行正确显示。通过这种.row-fluid > span关系，该封装内的 span 标签没有左边距，因此不需要在.row-fluid
