Question

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

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

所有发生的事情都是井没有偏移 4个空格。我用Google搜索，但找不到明确的答案。有人有修复吗？

Answer 1

我不会在现有的偏移类上使用!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引导程序会在margin-left: 0容器中的:first-child元素上放置.row-fluid。现在，最简单的方法是将!important属性添加到新声明的.row-fluid .offset*类中。您也可以调整他们的:first-child选择器，使其显示为：

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

如果margin-left: 0元素没有任何.span*类，则只会应用.offset*。但是，浏览器对此类事物的支持可能非常有限。

Answer 2

Bootstrap现在支持这个：

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

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

Answer 3

issue已经在Github上提升了，根据Bootstrap开发人员的说法，修复会随着时间而来，所以我想在此期间你主要不得不依赖黑客攻击。您可以采用两种方法将.offset添加到.row-fluid类（如果适合您）或将您选择的.offset类添加到样式表中并声明它使用!important属性，如下所示：

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

Answer 4

这就是我正在做的事情：

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

在Twitter的Bootstrap中使用'row-fluid'时，偏移不起作用

4 个答案: