当我做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个相同宽度的列。你不需要改变任何东西。
