Bootstrap 3 is using a lot :before, :after filters for CSS margin and padding, but emberjs’s “metamorph” placeholders are breaking them.
For example: panels in panel group should have a 5px margin using:
.panel-group .panel + .panel
If I loop a array of panels, the margins are destroyed.
Does anyone meet this issue?
The script placeholder really smells bad.
It isn’t the :before and :after pseudo-elements causing the trouble, it’s the + (adjacent sibling) combinator. The selector you cite should match an element with class equal to panel if it immediately follows another one with the same parent, but it doesn’t immediately follow because of the script elements that Ember puts in between. It’s the same phenomenon as the way :first-child and :last-child don’t work as you expect.
The only immediately obvious way round this is to over-ride the rule in your own style sheet, using a simpler selector, (something like .panel-group panel and then add a special case for :first-of-type to get rid of the margin on the first one) but if this idiom is used widely throughout Bootstrap, that is not likely to be practical as a general solution.
Are you sure you’re not using IE8 or a stupid browser like that? The issue you’ve flagged doesn’t sound logical.
