Document broken "outdent" with multiple navbar-right classes

[fleaflicker]

First reported in #12947 . Resubmitting with an example and more details as requested by @mdo .

http://jsfiddle.net/D2RLR/5339/ (this is a pure CSS issue, but you'll need to expand your viewport so that the navbar is not collapsed)

The example shows the navbar from the docs but with one change -- the form is pulled right with .navbar-right.

I believe the intent of all the negative margins on .navbar-right is so that the right-most one will go up to the right edge of the navbar.

It works with just one .navbar-right element, but not with two or more because right floated elements appear in reverse order from their markup order.

In the example, the `.nav' items are shifted right 15px. They should not be but the form should be shifted right 15px.

Relevant excerpt from navbar.less

// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
      margin-right: -@navbar-padding-horizontal;
    }

The negative margin should apply to the first element with the .navbar-right class. But I'm not sure how to select that.

[mdo]

Gotcha—totally see what you mean here. Looking at this again, I don't know that there is a solid fix we can implement for this in v3.x. Honestly the navbar is so complex that it's unmaintainable. Optionally, we could wrap all the components that need to be on the right, but that's not really that doable and it still has the same problem.

[fleaflicker]

I don't see a good fix either. As you say, wrapping both elements in one .navbar-right doesn't work.

The only solution I can think of is to introduce a .navbar-right-first class that users would explicitly add and applies a negative margin. But this strikes me as a very un-boostrapy solution.

It's easy enough to fix manually on a case-by-case basis if the limitation is documented.

[zlatanvasovic]

@fleaflicker This should fix the issue:

// Outdent the form if first child to line up with content down the page
&.navbar-right:first-child {
  margin-right: -@navbar-padding-horizontal;
}

:last-child became :first-child.

[hnrch02]

@zdroid I don't think that will fix the issue. Something like :first-of-class would be needed.

[zlatanvasovic]

Then you should use :first-of-type. :)

[hnrch02]

Well, in the example .navbar-right is applied to a variety of elements, not only one type.

[zlatanvasovic]

:(

2014-03-09 14:47 GMT+01:00 Heinrich Fenkart [email protected]:

Well, in the example http://jsfiddle.net/D2RLR/5339/ .navbar-right is
applied to a variety of elements, not only one type.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/12951#issuecomment-37127258
.

Zlatan Vasović - ZDroid

[mdo]

I've added a note about this to our docs and added it to our v4 planning issue to revisit when we can. Until then, ugh. Sorry folks <3.

[mdo]

Btw, future me, look at http://jsbin.com/rawel/2/ for a clear example. <3