为什么bootstrap .row类的默认边距为-30px？

Question

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

当你看我的测试设计时：

为什么我被强制留下-30px的保证金？

使用这个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>

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

<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. 当我删除-30px边距时，为什么整个3列设计都会合在一起？

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

Answer 1

问题1 ：

span都有margin-left 30px来在单个块之间创建一些空格。此空格应仅显示 单个span和不在开头（或结束）row。要做到这一点，有几种可能性 - 例如：

• 使用行上的space-with创建一个负margin（这是bootstrap所做的）
• 使用:first-child选择器删除连续第一个span的左边距
• [待续]

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

一个小例子：假设你的span宽度为100，空格为10，连续有3个。

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

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

Answer 2

班级row添加了

1. clearfix
2. 否定margin-left
3. 否定margin-right

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

开头有负边距：

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

开头没有负边距：

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

Answer 3

因为您不再需要使用行液。所有行都执行cleafix并应用负边距。这对于精确的网格系统通常是正确的。您可以使用容器或使用“行”而不是使用“clearfix”，并且您将拥有与之前完全相同的行为，没有边距。

Answer 4

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

Answer 5

如果您处于流体模式且使用较少，则mixin非常有用： .offset First Child（@columns）

（参见mixin.less of Bootstrap）

Answer 6

使用jQuery：

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

Answer 7

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

.nomargin {margin: 0;}

和HTML：

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

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