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

Question

当我做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>

1. 当我移除-30px边距时,为什么整个3列设计都会合在一起？

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

Answer 1

问题1:

在span一切都具有margin-left的30px创造单块之间的一些空间.这个空间应该只出现在单个spans 之间而不是出现在开头(或结束)之间row.要做到这一点,有几种可能性 - 例如:

• margin在行上用空格创建一个负数(这就是bootstrap所做的)
• 使用:first-child选择器删除第一span行中的margin-left
• [未完待续]

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

一个小例子:假设你span的宽度为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)
    • 万岁,我们用数学的力量创造了伟大的事物

问题2 如果你使用span4s,你已经有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",并且您将具有与之前完全相同的行为,没有边距.