Changed last-child to first-child to fix #13325

[NickColley]

Fixes #13325.
Fixes incorrect margin fix as the right most element will actually be the first in the DOM.
As noted by @jerem

[cvrebert]

Need to adjust this comment and the similar one below.

[lee36656]

NAVER - http://www.naver.com/

lee36656@naver.com 님께 보내신 메일 <Re: [bootstrap] #13325 - Changed last-child to first-child (#13464)> 이 다음과 같은 이유로 전송 실패했습니다.

---

받는 사람이 회원님의 메일을 수신차단 하였습니다.

---

[NickColley]

Alright @cvrebert sorted that.

[loic]

I don't think first-child is appropriate here. The navbar will certainly have other elements appearing first in the DOM like a left aligned navbar-var or navbar-form.

I believe first-of-type is the right selector here.

[NickColley]

Since it's only being applied on navbar items being floated right is that a problem?

[mdo]

As far as I know, none of those solutions are going to work in every use case. This is just a larger problem with the limitation of the navbar given it's current structural constraints. Not sure there's a decent solution right now.

Can you test this with a bunch of navbar layouts in a jsbin?

[loic]

POC: http://jsbin.com/zamolure/1/.

[mdo]

I screwed with this a big more to get to http://jsbin.com/zamolure/6/.

This should work in fixing things, but we'll need more testing. Punting to v3.2.1 for now so we can let this bake a bit more.

[NickColley]

Looking better, I noticed when those examples end up full width there's a gap exposed.
Check out this version to see the difference:
http://jsbin.com/zamolure/7/

I'll see if I can work up some more examples to test against.

[mdo]

@NickColley Did you end up doing any more testing on this? I haven't revisited since my last comment.

[loic]

I've been using the fix I proposed in http://jsbin.com/zamolure/1/, it works well for me both in FF and Blink/Webkit, I don't have an IE to test it against.

I can't reproduce the gap mentioned by @NickColley.

[NickColley]

@loic you need to have the example /6/ small enough that it goes into the full width mobile view. There's a gap at the end.

[loic]

@NickColley right! The css should be wrapped in a media query: http://jsbin.com/zamolure/8/.

[mdo]

Downside to your latest @loic is that the margins between consecutive .navbar-right double up. See the space between "Link" and search input:

[cvrebert]

Is nesting stuff within one navbar-right an option, as opposed to having multiple navbar-rights?

[loic]

@mdo isn't that the expected spacing though? By my tests .navbar-left shows similar spacing.

@cvrebert just tried it, it doesn't seem to work.

[mdo]

@loic I'm not sure if one or the other should be expected or the intended styles, but what I am saying is that the spacing has changed between master and here. The consecutive .navbar-right spacing is doubled with these changes.

[loic]

@mdo unless I'm misunderstanding the issue, this extra spacing is because .navbar-form { padding: 10px 15px; } can now express itself.

Just beefed up the example a little: http://jsbin.com/zamolure/12

We can see in the "Fixed" section that the spacing is now the same for right alignment as it has always been for left alignment.

I also added a "Without margins" section that prevents the double margin both on '.navbar-left' and '.navbar-right' but I don't think it's the expected behavior, especially on links.

[mdo]

Yeah I think this ends up fixing more things than breaking, so I'm good to merge it.

[mdo]

Thanks!

[loic]

@mdo you've merged the fix from @NickColley which is completely different from the fix I was proposing. AFAIK this commit doesn't address the issue and should be reverted.

I can make a new PR with the fix from my POC.

[mdo]

I don't think we'll revert as I think this still fixes a valid issue. But sure, open a new PR with more info and we'll revisit.

[loic]

Well the fix is wrong in a sense that .navbar-right:first-child will only ever match anything if there is nothing left aligned in the navbar.