twitter/bootstrap — Issue #2377: Prepended fields don't line up in grid using span classes
Author: flynfish
Created: 2012-03-02 16:00:24+00:00
State: open

If you have a prepended field and give it a span* class, it doesn't line up with the rest of the normal fields due to the width of the prepend. The following is how I fixed it, but I am wondering if there is a better solution?

Basically you have to offset the width by 36px...

#gridSystem1 {
.columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
width: (@gridColumnWidth * @columns) - 36 + (@gridGutterWidth * (@columns - 1));
}
}

.input-prepend {

// Default columns
input.span1 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
input.span2 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
input.span3 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
input.span4 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
input.span5 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
input.span6 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
input.span7 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
input.span8 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
input.span9 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
input.span10 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
input.span11 { #gridSystem1 > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }

}