在 Twitter 的 Bootstrap 中使用“row-fluid”时，偏移量不起作用答案

【问题标题】：Offsets don't work when using 'row-fluid' in Twitter's Bootstrap在 Twitter 的 Bootstrap 中使用“row-fluid”时，偏移量不起作用
【发布时间】：2013-06-25 02:15:04
【问题描述】：

我正在使用 Bootstrap-Twitter，每当我尝试使用流式行时，跨度上的偏移都不起作用。这是一些代码：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="well span4 offset4">
            Content here
        </div>
    </div>
</div>

所有发生的事情是井没有偏移 4 个空格。我用谷歌搜索了它，但找不到明确的答案。有人解决了吗？

【问题讨论】：

我只想指出，将网格的 span 类与 well 或其他用于内容的类混合可能不是一个好主意。这样做将不可避免地破坏您的网格，因为许多内容类添加了它们自己的填充和边距，这两者都会影响元素的总外部宽度。如果您在一个 12 列的行中有 3 个 .span4.well div，它们将无法显示在屏幕上。只是一个想法。

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 现在支持这个：

从 2.1.0-wip 开始，.offset* 类现在可以与流体网格系统一起使用

https://twitter.com/twbootstrap/status/215649222224134144

【讨论】：

【解决方案2】：

我不会在现有的偏移量类上使用!important 属性，因为它定义了一个像素值，而使用流体的全部意义在于使用百分比。

这是我想出的用于为流体行创建自己的偏移量的公式。

@for $i from 1 through 12 {
  .row-fluid .offset#{$i} {
    margin-left: (6.382978723% * $i) + (2.127659574% * $i);
    *margin-left: (6.329787233638298% * $i) + (2.0744680846382977% * $i);
  }
}

那么，让我解释一下您在这里看到的内容。这是一个使用 SCSS 的 for 循环，用于编写 offset1 - offset12 类。这仅适用于单个媒体查询，因为您必须定义它 3 次（因为宽度和偏移量在 twitter 引导代码中的 3 个单独的媒体查询中更改）。基本原理是这样的：

margin-left = (width_of_span1 * x) + (margin-left_of_row-fluid_span* * x)

x 的值等于您希望偏移的列数，因此，对于.offset1，您将使用1 作为x 的值。对于.offset12，您将使用12 作为x 的值。

您还需要再调整一种样式，因为 twitter bootstrap 在 .row-fluid 容器内的 :first-child 元素上放置了一个 margin-left: 0。现在，最简单的方法是将!important 属性添加到新声明的.row-fluid .offset* 类中。您也可以调整他们的 :first-child 选择器，使其显示为：

.row-fluid [class*="span"]:first-child:not([class*=offset])

如果.span* 元素也没有任何.offset* 类，这只会应用margin-left: 0。不过，浏览器对这种类型的支持可能非常有限。

【讨论】：

【解决方案3】：

issue 已在 Github 上提出，根据 Bootstrap 开发人员的说法，随着时间的推移会进行修复，所以我想在此期间你主要必须依赖 hack。有两种方法可以将.offset 添加到.row-fluid 类（如果适合您）或将您选择的.offset 类添加到样式表并使用!important 属性声明它，就像这样：

.offset4 {
    margin-left: 340px !important;
}

【讨论】：

但这并不流畅！就个人而言，我喜欢 RussellUresti 发布的解决方案，如下（不幸的是，使用 :not() 除外，这似乎是必需的）。

【解决方案4】：

这就是我正在做的事情：

<div class="row-fluid">
  <div class="span4"></div>
  <div class="span4">
    Content here
  </div>
</div>

【讨论】：

当所有内容都折叠成每行一项（在窄屏幕上）时，该解决方案会创建空行。
这可以与 .hidden-phone 实用程序类结合使用，以克服 Marius 指出的空行