css – 为什么引导.row有默认margin-left -30px？

当我做boostrap我必须使用类“行”…

当你看看我的测试设计：

为什么我被迫用一个-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>

>为什么当我删除-30px左右的边缘时，整个3列设计会落在一起？
>我应该如何改变我的代码，真正得到一个3列布局每列具有相同的宽度。这是span4应该做的。

解决方法

问题1：

所有跨度都有30像素的边距，以在单个块之间创建一些空间。此空间应该只出现在单个跨度之间，而不是在行的开始(或结束)。为了实现这一点，有几种可能性 – 例如：

>在行上创建一个带空格的负边距(这是引导程序所做的)
>使用：first-child selector删除一行中第一个span上的margin-left
> [待续]

我只能假设引导使用第一个选项，因为它与旧的浏览器(最可能IE 7和更低版本)兼容。

一个小例子：让我们说，你的跨度有100的宽度，10的空间，有一行3。

>在这种情况下，您的总行宽应为320(100 10 100 10 100 = 320)
>单个跨度的宽度为110(100宽度10 magin左)

>简单地添加这些将会给你一个宽度330和一个丑陋的空间10开始(10 100 10 100 10 100 = 330)
>使用列出的方法之一“减去”10(-10 10 100 10 100 10 100 = 320)

> hooray，我们创造了伟大的事情与数学的力量

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