Negative margin on '.navbar-right:last-child' in Navbar is a miscalculation

[aahan]

Issue in: Navbar component

.navbar-nav.navbar-right:last-child {
  margin-right: -15px;
}

That's the CSS style applied on the right-floating menu items' container. It does its intended job only as long as there's only one <element class=" ... navbar-right"> in the Navbar. Add another and it messes the spacing of the last container ("last" not in HTML but in the order of appearance in browser, considering it's float: right;).

The Dashboard example template has the necessary items to reproduce the issue. Take a look at the snapshots, they should be self-explanatory.

I am not saying margin-right: -15px; is wrong. It's needed, but doesn't suit all cases like I clearly explained. Manually adding a class like .last-child on the element itself is probably the way to go, but what do I know!

[RWOverdijk]

+1. I'm using it as a toolbar, where I don't want the button to stick to the right.I can opt-out by setting the margin to 0 myself, but I think bootstrap is all about opt-in.

[jerem]

Same issue here.

What about targeting .navbar-right:first instead?

The first navbar-right element should be the last one in the order of appearance in the browser.

[NickColley]

I've created a PR to fix this, if anyone has time to test it that'd be ace so I can make any amends needed. #13464

[lee36656]

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

lee36656@naver.com 님께 보내신 메일 <Re: [bootstrap] Negative margin on '.navbar-right:last-child' in Navbar is a miscalculation (#13325)> 이 다음과 같은 이유로 전송 실패했습니다.

---

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

---