为什么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>
-
为什么整个3列的devise会一起去掉-30px的余量？
-
我应该如何改变我的代码，以真正得到一个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添加一个
-
clearfix - 负
margin-left - 负
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');
