Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation - Auto-layout columns vs col-{breakpoint}-auto #21683

Closed
Hube2 opened this issue Jan 12, 2017 · 0 comments
Closed

Documentation - Auto-layout columns vs col-{breakpoint}-auto #21683

Hube2 opened this issue Jan 12, 2017 · 0 comments

Comments

@Hube2
Copy link

Hube2 commented Jan 12, 2017

Hopefully I'm doing this right, first time here, feel free to yell at me if I'm doing something wrong. I did my best to search for anything similar.

I personally think that there can be some confusion over the difference between auto layout of columns and using the col-{breakpoint}-auto for variable width content. I actually had to read that part of the documentation several times before I really understood the difference.

For example, this will create 3 columns that are each ~33% width on sm

<div class="row">
    <div class="col-sm">
      1 of 3
    </div>
    <div class="col-sm">
      2 of 3
    </div>
    <div class="col-sm">
      3 of 3
    </div>
</div>

but this will create 3 columns where the first and last are the same size (~33%) and the middle column will resize based on the content, unless I have it wrong.

<div class="row">
    <div class="col-sm">
      1 of 3
    </div>
    <div class="col-sm-auto">
      Variable width content
    </div>
    <div class="col-sm">
      3 of 3
    </div>
</div>

I think it may be the use of the -auto modifier because this is referring to auto size based on the natural content width. Like I said, It took me several reading to figure out why there is a difference and I think that it needs to be clarified better in the documentation. Again, unless I'm still confused.

~JH

@mdo mdo modified the milestone: v4.0.0-beta Jan 21, 2017
@mdo mdo mentioned this issue Mar 25, 2017
4 tasks
@mdo mdo added the has-pr label Mar 26, 2017
@mdo mdo closed this as completed in 9596cb5 Mar 26, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants