Twitter bootstraps fluid grids are broken #545

Closed
lslinnet opened this Issue Sep 25, 2012 · 7 comments

Comments

Projects
None yet
7 participants

The margin-left is calculated wrongly in the chosen compass migration. when using

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2"><h1>span2</h1></div>
    <div class="span10"><h1>span10</h1></div>
  </div>
</div>

Which is the example from the bootstrap pages.

the margin-left on the span10 gets set to ~92%

Owner

sindresorhus commented Sep 25, 2012

@kristianmandrup any thoughts?

There have just been some patches lately. Check out vwall/compass-twitter-bootstrap#70 (comment)

I haven't had the chance/time to look closely at it myself.

dpalita commented Sep 27, 2012

I customized it a lot and I can't seem to find where the source for the compass scss is pulled from but in my case the fluid grid was broken because of the mixin grid-fluid which had .spanX and .offsetX mixed up :

was something like :
$i: $gridColumns;
@while $i > 0 {
.span#{$i}, .offset#{$i} {
@include fluid-span($i, $columnWidth, $gutterWidth);
@include fluid-offset($i, $columnWidth, $gutterWidth);
}
$i: $i - 1;
}

should be something like :
$i: $gridColumns;
@while $i > 0 {
.span#{$i} {
@include fluid-span($i, $columnWidth, $gutterWidth);
}
.offset#{$i} {
@include fluid-offset($i, $columnWidth, $gutterWidth);
}
$i: $i - 1;
}

ethern8 commented Sep 28, 2012

@dpalita some great fixes got added to @kristianmandrup 's fork of compass-twitter-bootstrap. Specifically the _mixin.scss(sass) that deals with fluid grids.

https://github.com/kristianmandrup/compass-twitter-bootstrap/blob/master/stylesheets/compass_twitter_bootstrap/_mixins.scss

I would love to see these added to Yeoman.

Thanks guys! I hope it is ready for action now in the "mother ship" ;)

trabus commented Oct 9, 2012

The generator has been updated to use the latest branch with this commit on Sept 25th-
https://github.com/yeoman/generators/commit/69fb7b479d65d2639fed635d6c9855f8ff0b60a9#lib/generators/yeoman/app/index.js

I've tested by initiating a new project to ensure the updated mixin fix is in, and it is, so I think this issue can be closed!

Owner

addyosmani commented Oct 10, 2012

Thanks @trabus and everyone else!

@addyosmani addyosmani closed this Oct 10, 2012

@kristianmandrup kristianmandrup referenced this issue in vwall/compass-twitter-bootstrap Oct 31, 2012

Closed

Update to Bootstrap 2.2 #77

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment