Navbar item with dropdown receives scrollbar when manipulated

[dugajean]

I came across a situation where the navbar becomes quite weird. I have a menu item on the far right of the bar which is a dropdown menu item. My menu item is a "cog" glyphicon, but when this gets viewed in smaller resolutions, the glyphicon by itself looks quite weird, so I went ahead and tried to add some text if the navbar is being viewed by extra-small devices.

Using "visible-xs" wouldn't work for some reason as it put my text on its own line, so I tried manipulating the text with my own media queries and jQuery; This is when I noticed the weird behavior of the navbar.

This is the jQuery I've used to manipulate my navbar list item:
https://gist.github.com/DEATHMETALGORE/8077356

And this is how it looks like after I smaller then increase the browser size:

Normal:

Extra Small:

After re-increasing:

I'm assuming this comes from Bootstrap's behalf. I've used jQuery as the last alternative and I've tried using CSS media queries before going for jQuery -- same result.

[cvrebert]

.visible-xs sets display: block when the element is meant to be visible, hence why it put your text on a separate line; see #8869.

[cvrebert]

So, to clarify, the scrollbar even happens without your custom JS?

[dugajean]

Correct.

[cvrebert]

Please make the example into a JS Fiddle or JS Bin.

[mdo]

@DEATHMETALGORE You using v3.0.3?

[mdo]

I believe this is a dupe, so closing out until we hear otherwise since this sounds like the exact bug we fixed recently.