Offsets don't work when using 'row-fluid' in Twitter's Bootstrap

Question

I'm using Bootstrap-Twitter, and whenever I try to use fluid rows, offsets on spans don't work. Here's some code:

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

And all that's happening is that the well is not offsetting by 4 spaces. I Googled it, but could't find a clear answer. Does anybody have a fix?

Answer 1

Bootstrap now supports this:

As of 2.1.0-wip, .offset* classes will now work with the fluid grid system

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

Answer 2

I wouldn't use the !important property on the existing offset class, as it defines a pixel value and the whole point of using fluid is to use percentages.

Here's a formula that I came up with for creating your own offset for fluid rows.

@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);
  }
}

So, let me explain what you're seeing here. This is a for loop using SCSS, used to write the offset1 - offset12 classes. This is only for a single media query, as you'll have to define define it 3 times (since the widths and offsets are changed in 3 separate media queries in the twitter bootstrap code). The basic principle is this:

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

The value of x is equal to the number of columns you wish to offset, so, for .offset1 you would use 1 as the value of x. For .offset12 you would use 12 as the value of x.

You will also need to adjust one more style, as twitter bootstrap puts a margin-left: 0 on the :first-child element within the .row-fluid container. Now, the easiest way is to just add the !important attribute to your newly declared .row-fluid .offset* classes. You might also be able to do adjust their :first-child selector so that it reads:

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

This would only apply the margin-left: 0 if the .span* element did NOT have any of the .offset* classes as well. Though, browser support for that type of thing is probably pretty limited.

Answer 3

The issue has been raised over at Github and according to the Bootstrap developers a fix will come with time, so i guess in the meantime you mainly have to rely on hacks. Two ways you can go about it is to add the .offset to the .row-fluid class (if that works out for you) or add the .offset class of your choice to your stylesheet and declare it with the !important property, like so:

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

Answer 4

Here's what I'm doing:

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