CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joel
Joel

Reputation: 8938

Bootstrap fluid layout, wrong margin?

Edit: I realize this might be a Safari issue? I don't see the same in Firefox

The following image is taken from the Bootstrap documentation, here. What I'm wondering is why there is a 2px margin to the right of the rightmost "Fluid 6" element. Shouldn't that element align all the way to the right? And what can I do to fix it?

enter image description here

Enhanced image:enter image description here

Upvotes: 2

Views: 399

Answers (1)

sachleen
sachleen

Reputation: 31131

It's not just span6, it's anything that isn't 100% of the width.

enter image description here

Notice how all but the last row have this problem. The problem is that Bootstrap specifies widths as percents.

For example, for span6,

.span6 {
    width: 48.717948717948715%;
}

There is also a space between the two span elements,

margin-left: 2.564102564102564%;

Adding these up does not result in a nice even number, so we sometimes end up a pixel under. Other than setting fixed values for the widths and margins, not much can be done.

span12 has a 100% width:

.span12 {
    width: 100%;
}

which is exactly that, so there's no problem with rounding.

Upvotes: 1

Related Questions