CSS 为什么 bootstrap .row 类的默认 margin-left 为 -30px？

Why does the bootstrap .row class have a default margin-left of -30px?

提问by Elisabeth

When I do boostrap I have to use the class "row" ...

当我做 boostrap 时，我必须使用“row”类......

When you look at my test design:

当您查看我的测试设计时：

Why I am forced with a margin-left of -30px?

为什么我被迫使用 -30px 的左边距？

With this html I would expect 3 rows sharing each column 33% of the whole available width:

使用这个 html，我希望 3 行共享每列 33% 的整个可用宽度：

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

The gray area with the buttons is from this code:

带有按钮的灰色区域来自以下代码：

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: 'entrance' } -->
    <!-- /ko -->
</div>

1. Why does the whole 3-column design fall together when I remove the -30px margin-left?

2. How should I change my code to really get a 3 column layout each column having the same width. This is what span4 should do.

1. 当我删除 -30px margin-left 时，为什么整个 3 列设计会合并在一起？

2. 我应该如何更改我的代码以真正获得每列具有相同宽度的 3 列布局。这是span4应该做的。

采纳答案by oezi

question 1:

问题1：

the spans all have a margin-leftof 30pxto create some space between the single blocks. this space should only appear betweenthe single spans and not at the beginning(or end) of the row. to accomplish this, there are several possibilitys - for example:

在span一切都具有margin-left的30px创造单块之间的一些空间。这个空间只应出现之间的单个spanS和在开始时没有的（或端）row。要做到这一点，有几种可能性 - 例如：

• create a negative marginwith the space-with on the row (this is what bootstrap does)
• use the :first-childselector to remove margin-left on the first spanin a row
• [to be continued]

• margin在行上用空格创建一个负数（这就是引导程序所做的）
• 使用:first-child选择器删除span一行中第一个的左边距
• [未完待续]

i can only assume the bootstrap uses the first option because it's more compatible with older browsers (most likely IE 7 and below).

我只能假设引导程序使用第一个选项，因为它与旧浏览器（最有可能是 IE 7 及更低版本）更兼容。

a little example: lets say your spans have a width of 100, a space of 10 and there are 3 in a row.

一个小例子：假设您的spans 的宽度为 100，空间为 10，并且连续有 3 个。

• your total row-width in this case should be 320 (100 + 10 + 100 + 10 + 100 = 320)
• a single span has a width of 110 (100 width + 10 magin-left)
  • simply adding those up would give you a width of 330 and an ugly space of 10 at the beginning (10 +100 + 10 + 100 + 10 + 100 = 330)
  • "subtract" 10 with one of the listed methods (-10+ 10 + 100 + 10 + 100 + 10 + 100 = 320)
    • hooray, we've created great things with the power of math

• 在这种情况下，您的总行宽应为 320（100 + 10 + 100 + 10 + 100 = 320）
• 单个跨度的宽度为 110（100 宽度 + 10 左边距）
  • 简单地把这些加起来会给你一个 330 的宽度和一个 10 的丑陋空间（10 +100 + 10 + 100 + 10 + 100 = 330）
  • 使用列出的方法之一“减去”10（-10+ 10 + 100 + 10 + 100 + 10 + 100 = 320）
    • 万岁，我们用数学的力量创造了伟大的事物

question 2if you use span4s, you already have 3 columns of the same width. you don't need to change anything.

问题 2如果使用span4s，则已经有 3 列宽度相同。你不需要改变任何东西。

回答by Jens A. Koch

Class rowadds a

类row添加一个

1. clearfix
2. negative margin-left
3. negative margin-right

1. clearfix
2. 消极的 margin-left
3. 消极的 margin-right

Bootply: http://www.bootply.com/120858

引导：http: //www.bootply.com/120858

Withnegative margin at the beginning:

随着之初负保证金：

<div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Withoutnegative margin at the beginning:

一开始没有负边距：

<div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

回答by Kyle

Because you don't need to use row-fluid anymore. All row does is perform the cleafix and apply the negative margin. This is typically correct for an accurate grid system. You can use containers or instead of using "row" you just use "clearfix" and you'll have the exact same behavior as before with no margin.

因为您不再需要使用 row-fluid 了。所有行所做的就是执行 Cleafix 并应用负边距。这对于精确的网格系统通常是正确的。您可以使用容器，或者不使用“row”，而只使用“clearfix”，您将拥有与以前完全相同的行为，没有边距。

回答by Ahmed Elkoussy

One way to solve this issue is to use class="container row"instead of class="row", this solution will make the row fit inside the container without horizontal overflow.

解决此问题的一种方法是使用 class="container row"代替class="row"，此解决方案将使行适合在容器内而不会水平溢出。

回答by Vizarius

Use jQuery:

使用jQuery：

$('<div>Test</div>').addClass('row').css("margin-left", 0).css("margin-right", 0).appendTo('.content');

回答by devside

If you are in Fluid mode and using less, a mixin is very usefull: .offsetFirstChild (@columns)

如果您处于 Fluid 模式并且使用较少，mixin 非常有用：.offsetFirstChild (@columns)

(see mixin.less of Bootstrap)

（参见 Bootstrap 的 mixin.less）

回答by tedebus

To avoid to use "container" on a separate "div", why don't define a specific class on a custom CSS? I use:

为了避免在单独的“div”上使用“容器”，为什么不在自定义 CSS 上定义特定的类？我用：

.nomargin {margin: 0;}

and on HTML:

并在 HTML 上：

<div class="row nomargin">
?…
?</div>

Same result but more readable.

相同的结果，但更具可读性。