681 posts
  • Has been part of the Envato Community for over 4 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?

681 posts
  • Has been part of the Envato Community for over 4 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.

681 posts
  • Has been part of the Envato Community for over 4 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

3787 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Has been part of the Envato Community for over 7 years
+9 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!

681 posts
  • Has been part of the Envato Community for over 4 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 :)

681 posts
  • Has been part of the Envato Community for over 4 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?

681 posts
  • Has been part of the Envato Community for over 4 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… ?

1890 posts YOU TOUCH IT YOU BUY IT
  • Achieved the monthly Community Superstar Award
  • Has sold $750,000+ on Envato Market
  • Won a competition
  • Elite Author: Sold more than $75,000 on Envato Market
+7 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.

1890 posts YOU TOUCH IT YOU BUY IT
  • Achieved the monthly Community Superstar Award
  • Has sold $750,000+ on Envato Market
  • Won a competition
  • Elite Author: Sold more than $75,000 on Envato Market
+7 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