Multiple .navbar-right in .navbar-collapse overlap (margin-right error)

Created by: miniplus

When using multiple .navbar-right containers inside a .navbar-collapse, the last .navbar-right container gets a negative margin (using :last-child) so that the content aligns with .navbar-collapse.

The problem here is that the first .navbar-right is the one aligned to the far right (so actually the first appearance in the DOM get's aligned to the right). The last appearance of .navbar-right gets a negative margin-right which causes the last one and the one before to overlap and the content still not aligning to the right of .navbar-collapse.

:first-child can not be used as the first appearance of .navbar-right is not the first child within it's container.

Also, there is no support for :last-child in IE8.

JSfiddle

Proposed solution

Target all direct .navbar-right children of the container and apply the negative margin-right. After that negate the margin-right on all following .navbar-right items by setting the margin-right to 0.

Also allowing IE8 support

Example

.navbar-collapse {
    > .navbar-nav.navbar-right {
        margin-right: -15px;
        ~ .navbar-right {
            margin-right: 0;
        }
    }
}