-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
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
v4 clearfix on .card-{block,header,footer} breaks flex layouts #18849
Comments
I think you meant |
X-Ref: #18655 |
@ju1ius I can't seem to reproduce any difference in spacing on either Chrome or Firefox on OS X between Flexbox and non-Flexbox cards. Are you using some other browser? Could you post a JS Bin or JS Fiddle that demonstrates the difference? |
Here are the updated examples: In all examples, I added .card-footer {
display: flex;
justify-content: space-between;
} Expected result: the first child of The issue is with the code in .card-footer {
@include clearfix;
// ...
} It adds an That's why the code in the above-mentioned file should be... .card-footer {
@if (not $enable-flex) {
@include clearfix;
}
// ...
} ...idem with .card-header, .card-block, and probably also in other places in the framework. Because if I enable the flexbox option, I don't need to clear floats that don't exist ! 😉 |
Thanks @twbs-lmvtfy, but this is irrelevant to the issue. 😇 |
I believe they are needed because users might choose to include floated things in the card. See the first card in my earlier examples, and #18655. |
Ah, I hadn't been clear on the fact that custom CSS was needed to trigger the problem. |
Hmm, but even with Flexbox enabled, the Card itself is still |
I'm also suspecting a «clearfix all the things just in case» syndrom.
|
Apparently the plan is to Flexbox-ify all the things (#18901 (comment)), so #18851 sounds reasonable, FWIW. |
It does not really matter if something is floated in there. In the examples on jsfiddle.net, the button styled via |
Hi @thierryk! You appear to have posted a live example (https://fiddle.jshell.net/6ancmdx0/7/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
You'll need to fix these errors and post a revised example before we can proceed further. (Please note that this is a fully automated comment.) |
Don't clearfix if flexbox is enabled. Fixes #18849
In latest v4-dev branch, the clearfix mixin is added on all the card subcomponents.
If the subcomponent is added a flex display, the
:after
pseudo added by the mixin adds unwanted spacing at the end of the flex block's main axis.I think the mixin should be guarded by a
@if(not $enable-flex)
block;The text was updated successfully, but these errors were encountered: