648 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
+1 more
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?

648 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
+1 more
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.

648 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
+1 more
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

3711 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!

648 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
+1 more
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 :)

648 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
+1 more
ChapterThemes says

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

648 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
+1 more
ChapterThemes says

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

1882 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.

1882 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”.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by