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

当我做助推器,我不得不使用类“行”…

当你看我的testingdevise:

在这里输入图像说明

为什么我被强制留下了-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> 

带有button的灰色区域来自以下代码:

 <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. 为什么整个3列的devise会一起去掉-30px的余量?

  2. 我应该如何改变我的代码,以真正得到一个3列布局,每一列有相同的宽度。 这是span4应该做的。

问题1

span都有一个30px margin-left ,以在单个块之间创build一些空间。 这个空间应该只出现单个span 之间不是在行的开始 (或结束)之间。 要做到这一点,有几个可能性 – 例如:

  • 用行上的空格创build一个负margin (这是引导程序所做的)
  • 使用:first-childselect器删除连续第一个span上的余量
  • [未完待续]

我只能假设bootstrap使用第一个选项,因为它与旧版浏览器(很可能是IE 7及更低版本)更兼容。

一个小例子:可以说你的span有100的宽度,10的空间,有3个连续的。

  • 在这种情况下,你的总行宽应该是320(100 + 10 + 100 + 10 + 100 = 320)
  • 单个跨度的宽度为110(100宽度+10左右)
    • 简单地加起来就会给你一个330的宽度和一个10的丑陋空间( 10 + 100 + 10 + 100 + 10 + 100 = 330)
    • 用所列方法之一( -10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)“减去”
      • 万岁,我们用math的力量创造了伟大的事物

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

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> 

因为你不再需要使用排液。 所有行都是执行cleafix并应用负边距。 对于精确的网格系统来说,这通常是正确的。 你可以使用容器,而不是使用“row”,你只需要使用“clearfix”,你就可以像以前一样使用容器了。

如果您处于stream体模式并使用较less,mixin非常有用: .offsetFirstChild(@columns)

(参见Bootstrap的mixin.less)

使用jQuery:

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