631 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

For a new project i’m playing with the bootstrap fluid containers and rows. One thing i noticed is when using nested rows the margins between the nested columns are smaller than between the columns in not-nested rows.

Ofcourse this is logical since the margins are percentages, but is the difference between those margins okay from a design perspective view?

631 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

Anyone?

173 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
kungfu-themes says

It must be okay, because the fixes (hacks) and that’s what it would be (a hack) would probably break something along the way.

That’s why responsive design is by no means pixel perfect, when you resize your web browser.

631 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

It must be okay, because the fixes (hacks) and that’s what it would be (a hack) would probably break something along the way. That’s why responsive design is by no means pixel perfect, when you resize your web browser.

Thanks.

But still i find this a strange desicion at the guys from twitter who made bootstrap. Because there are also fluid grids who still have fixed gutters. which is the best way i think.

Well i’ll go create my own bootstrap version! :D

3576 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

This is all that i need from bootstrap:

.col1-4 {
  width: 25%;
}
.col1-3 {
  width: 33.33%;
}
.col1-2 {
  width: 50%;
}
.col2-3 {
  width: 66.34%;
}
.col3-4 {
  width: 75%;
}
.col1{
  width: 100%;
}
.col {
  float:left;
  display:block;
  padding:0 10px 100px;
  position:relative;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

And it works better, since you have fixed gutters.. You just have to give a negative margin to the container and you’re set!

631 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

Hey thanks!

I’ve also been playing to get a fluid grid with fixed gutters myself! I’ll have a look at this :)

631 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

@RubenBristian could you show me a small sample on how you use that with gutters and a container?

631 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
ChapterThemes says

The problem is you can’t proper create nested rows and columns with this… ?

1877 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

@RubenBristian could you show me a small sample on how you use that with gutters and a container?

Something like this?

http://jsfiddle.net/qZ6tV/

Try uncommenting the overflow:hidden on line 2 and press RUN. That’s what the negative margin is doing. Also try to resize your window -> fluid grid with fixed gutters.

1877 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
FRESHFACE says

The problem is you can’t proper create nested rows and columns with this… ?

What do you mean by that? Could you be more specific? I don’t know what you mean by “proper” and “nested”.

by
by
by
by
by
by