为什么bootstrap .row类有一个-30px的默认的边栏?

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

当我使用boostrap时，我必须使用class "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?

   为什么当我删除-30px左栏的时候，整个三栏的设计是一致的?

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.

   我应该如何修改我的代码来真正得到一个3列的布局，每个列的宽度相同。这就是span4塑身的功能。

6 个解决方案

#1

question 1:

问题1:

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

所有的span都有30px的左边界，以便在单个块之间创建一些空间。这个空间应该只出现在单个span之间，而不应该出现在行的开头(或结尾)。要做到这一点，有几种可能性——例如:

• create a negative margin with the space-with on the row (this is what bootstrap does)
• 使用空格创建一个负边距——在行上(这是bootstrap所做的)
• use the :first-child selector to remove margin-left on the first span in a row
• 使用:first-child selector删除行中第一个span的空白
• [to be continued]
• (未完待续)

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

我只能假设bootstrap使用第一个选项，因为它与旧的浏览器更兼容(最可能是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.

一个小例子:假设你的跨度有100个，一个10的空间，一个连续3个。

• your total row-width in this case should be 320 (100 + 10 + 100 + 10 + 100 = 320)
• 在这种情况下，您的行宽度应该是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)
  • 简单地把这些加起来，就会得到330的宽度，一开始会得到10的难看空间(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
    • 万岁，我们用数学的力量创造了伟大的东西
  • 用列出的方法减去10(-10 + 10 + 100 + 10 + 100 + 10 + 10 + 100 = 320)万岁，我们用数学的力量创造了伟大的事物
• 单个跨度的宽度为110(100宽+ 10英寸左)，简单地把它们加起来，宽度为330，最开始的空间为10 (10 + 100 + 10 + 100 + 100 + 100 = 330)用列出的方法减去10(-10 + 10 + 100 + 10 + 100 + 10 + 10 + 100 = 320)万岁，我们用数学的力量创造了伟大的事物

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

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

#2

Class row adds a

添加一个类行

1. clearfix
2. clearfix
3. negative margin-left
4. 负margin-left
5. negative margin-right
6. 负margin-right

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

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

With negative 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>

Without negative 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>

#3

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.

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

#4

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

如果您处于流体模式，并且使用较少，那么mixin是非常有用的:.offsetFirstChild (@columns)

(see mixin.less of Bootstrap)

(见mixin。更少的引导)

#5

Use jQuery:

使用jQuery:

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

#6

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"，该解决方案将使行适合容器内，而不会发生水平溢出。