612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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?

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

Anyone?

173 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 100 and 1 000 dollars
  • United Kingdom
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.

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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

3433 posts Ruben Bristian
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
  • Referred between 500 and 999 users
+5 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!

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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 :)

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

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

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

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

1864 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 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.

1864 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 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