Nested .btn-group doesn't inherit .btn-group-[size]
See original GitHub issueWhen one adds a dropdown to a button group, one must wrap it in .btn-group as documented here: https://getbootstrap.com/docs/4.0/components/button-group/#nesting.
However, when applying .btn-group-sm
to the outer button group, the dropdown button inside the inner button group don’t inherit the size set by the outer button group.
An example case is here: https://codepen.io/anon/pen/qxeqJK Both buttons should be the small size.
Looking at the SCSS file, the rule selector is .btn-group-sm>.btn, .btn-sm
. I’m not certain why the >
needs to be there - I can’t picture a use case where I’d set a size on an outer button group, and not have it cascade to any inner button groups.
I doubt this is a browser quirk, but nonetheless my OS is Win 10, and this is appearing on both Firefox and Chrome.
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (9 by maintainers)
Fair point. This may be why you author the world’s most popular UI framework and I do not.
What if your markup is nested within another wrapping element? Limiting to immediate children like that further limits the effectiveness of the code.