css - 为什么 bootstrap .row 类的默认 margin-left 为 -30px？

Question

当我做boostrap时，我必须使用“row”类......

当您查看我的测试设计时：

为什么我被迫使用-30px的margin-left？

使用这个 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 margin-left 时整个 3 列设计会掉在一起？

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

Answer 1

问题1：

spans 都有一个margin-leftof在30px单个块之间创建一些空间。此空格应仅出现在单个spans之间，而不应出现在 .s的开头（或结尾）row。要做到这一点，有几种可能性 - 例如：

• 用行上的空格创建一个负数margin（这就是 bootstrap 所做的）
• 使用选择器删除连续第一行:first-child的左边距span
• [未完待续]

我只能假设引导程序使用第一个选项，因为它与旧浏览器（很可能是 IE 7 及更低版本）更兼容。

一个小例子：假设您span的 s 宽度为 100，空间为 10，并且连续 3 个。

• 在这种情况下，您的总行宽应为 320 (100 + 10 + 100 + 10 + 100 = 320)
• 单个跨度的宽度为 110（100 宽度 + 10 magin-left）
  • 简单地把它们加起来会给你一个 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

引导层：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

因为您不再需要使用 row-fluid。所有行所做的是执行 cleafix 并应用负边距。这对于精确的网格系统通常是正确的。您可以使用容器，或者不使用“行”，而只使用“clearfix”，您将拥有与以前完全相同的行为，并且没有边距。

Answer 4

解决此问题的一种方法是使用 class="container row"而不是class="row"，此解决方案将使行适合容器内部而不会水平溢出。

Answer 5

If you are in Fluid mode and using less, a mixin is very usefull: .offsetFirstChild (@columns)

(see mixin.less of Bootstrap)

Answer 6

使用 jQuery：

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

Answer 7

为了避免在单独的“div”上使用“容器”，为什么不在自定义 CSS 上定义特定的类？我用：

.nomargin {margin: 0;}

在 HTML 上：

<div class="row nomargin">
 …
 </div>

结果相同，但更具可读性。