10

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

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

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

4

4 回答 4

8

Bootstrap 现在支持这个：

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

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

于 2012-06-21T12:06:11.373 回答
7

我不会!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会在容器内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*类的情况。不过，浏览器对这种类型的支持可能非常有限。

于 2012-06-06T18:42:41.113 回答
4

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

.offset4 {
    margin-left: 340px !important;
}
于 2012-04-15T18:08:30.773 回答
2

这就是我正在做的事情：

<div class="row-fluid">
  <div class="span4"></div>
  <div class="span4">
    Content here
  </div>
</div>
于 2012-07-23T11:28:06.720 回答