Allow for hidden-* inside buttons to not cause a line break [css]

[tmorehouse]

Background:

I have some buttons on my website that have a glyphicon plus text.

I would like to be able to use hidden-xs on a span around the text inside the button. When the screen is xs (<768px) the button only shows the glyphicon. And when the screen is > 767px the text shows along side the glyphicon.

But the issue is that the hidden-xs (and all other hidden-* classes) use a display: block !important to show the hidden content. THis causes the button to break into two lines.

<button class="btn btn-grey">
    <span class="glyphicon glyphicon-chevron-up"></span>
    <span class="hidden-xs">Top Of Page</span>
<button>

When the screen is smaller than 768px, the button looks correct:

But then the screen is 768px or greater, the button looks like this:

But it should look like the following:

Possible Solution

What I have done is to add my own media query CSS entries to modify the behavior when hidden-xs is inside a button. Rather than setting display to block !important, I have the display set to ``inline !important`:

@media (min-width: 768px) {
    button>.hidden-xs, .btn>.hidden-xs {display: inline !important; }
}

It would be nice to see something like this included in a future release of Boostrap.

[cvrebert]

Approximate duplicate of #8869.