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

col-auto removes gutters #22111

Closed
tylerrymer opened this issue Mar 3, 2017 · 3 comments
Closed

col-auto removes gutters #22111

tylerrymer opened this issue Mar 3, 2017 · 3 comments

Comments

@tylerrymer
Copy link

Perhaps it is intentional, but when you add col-auto, or col-{breakpoint}-auto for that matter, it automatically removes the element's gutters.

In my case, the first column has col-auto. It indeed fits to its content, but since there are no gutters defined for col-auto, it fits the outer edge of the row parent. As a result, it kind throws off the general flow and style of the row/column formatting.

I feel it would be beneficial to keep gutters intact regardless of whether or not a column is given a specified column length or set to auto. For the time being I have manually added in padding.

I couldn't find any other issues for this matter, and documentation makes no mention of it either. In the examples, they use col-12 on top of col-md-auto, so the element conveniently gets the padding from the col-12 class.

@mdo
Copy link
Member

mdo commented Mar 3, 2017

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with specific browser and OS details.

@tylerrymer
Copy link
Author

Example: https://jsbin.com/borusisaxi/edit?html,output

Using Chrome, Version 56.0.2924.87 (64-bit) running on Windows 10 64-bit OS

@tvervest
Copy link

tvervest commented Mar 7, 2017

I'm experiencing the same problem on the latest v4-dev branch. I've applied the same fix as @goldboat90, but I'd agree that the expected behaviour would be that the gutters would remain intact.

@mdo mdo added the has-pr label Mar 26, 2017
@mdo mdo added this to the v4.0.0-beta milestone Mar 26, 2017
mdo added a commit that referenced this issue Mar 26, 2017
- add .col-*-auto to the extend in our grid framework mixins so it gets padding
- this means we can avoid the col-12 classes in our docs for the responsive variants
@mdo mdo mentioned this issue Mar 26, 2017
4 tasks
mdo added a commit that referenced this issue Mar 26, 2017
- add .col-*-auto to the extend in our grid framework mixins so it gets padding
- this means we can avoid the col-12 classes in our docs for the responsive variants
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