Open wmertens opened 9 years ago
Thanks for filing this issue! I realized that the container class was added to conform with the bootstrap grid api better. I have not added it to the docs yet because I needed to look into some issues that cropped up due to the addition. It currently works just like the container class in boostrap if you want to assist in documenting it.
:+1: for documenting or removing the box
class.
@kristoferjoseph still no update? :(
@littleguga ya, I am doing away with the container class for the next update so I didn't want to document how Bootstrap does it. Like I said in another closed issue, it was added in a PR and it mimics Boostrap 3 functionality exactly. If you want to read on how to use it look at their docs. :/
I agree with @wmertens : box is confusing. and container must be specified in the documentation. Just a quick reminder... in order to avoid to go back to Bootstrap doc. That would be perfect. Thx
I hear you loud and clear buddy
@kristoferjoseph : ahah. thanks buddy. I really like to use FlexboxGrid. I have a project of making a small css framework for me, based on flexbox grid. keep up the good work.
box
is super confusing. container
's would be nice... are they staying? what's up with the docs? they are sort of counterproductive.... i need to go look at the source.. the docs confuse me.
Also found it confusing that .container
is in the docs source, but not documented. I'm coming from Bootstrap 3, so I can tell what it's meant to be used for. Originally I came here to report an issue that .container
doesn't work properly - if you add it to the page, you get horizontal scroll bars at certain breakpoints; only container-fluid
works correctly.
I fixed this with:
.container { // Emulates Bootstrap 3
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
@media (min-width: 768px) { width: 750px; }
@media (min-width: 1024px) { width: 970px; }
@media (min-width: 1200px) { width: 1170px; }
}
I posted on this a while back too. Coming from Bootstrap 3, there are some expectations that are not handled the same in Flexboxgrid. A big one is that their container and container-fluid have padding left and right, and the row's have negative padding to offset that. I really like how this works because it seems to me the best way to handle columns so that the content lines up if its in a container, or in a column
div class="container"
Content just in the container
div class="row"
div class="col-md-6"
Content in a column. Lines up niiiice.
/div
div class="col-md-6"
Content in a column Lines up niiiice.
/div
/div
/div
Not sure how the author feels about this, but I really like it, and if anyone else is interested in doing the same, here's some CSS to set it up.
.container, .container-fluid {
max-width: calc(100% - 2rem); // Fixes containers from stretching too wide for the screen
padding-left: 1rem;
padding-right: 1rem;
}
.row {
margin-left: -1rem;
margin-right: -1rem;
}
Would love to hear what you guys think
also, why do container-fluid and container not mimic bootstrap's naming convention as far as which one adds the padding and which one doesn't? In my project I took out the '-fluid' on line 50:
.container {
padding-right: $outer-margin;
padding-left: $outer-margin;
}
and now it mimics boostrap's usage.
the documentation is poor
.container
doesn't have padding around, and hence, the content sticks to both the ends on the mobile screen.. any fix for that?
The doc site doesn't mention
container
orcontainer-fluid
, nor what to do with them and if they are necessary.(likewise, the use of the
box
class in the documentation is confusing, as if it's needed)