<p dir="auto">The responsive utility class .visible-* assumes that we always want display:block to reenable displaying of the given element. It would be nice if in the case that we used this class on an inline element it produced a display:inline style.</p>
<p dir="auto">Adjustments are offered in the case that the tag is table related, but not a span (which really should be inline). Perhaps other inline elements could be considered also? <a href="https://developer.mozilla.org/en-US/docs/HTML/Inline_elements" rel="nofollow">https://developer.mozilla.org/en-US/docs/HTML/Inline_elements</a></p>
<p dir="auto">A span rule could be added to the .responsive-visibility() mixin in mixins.less</p>
<p dir="auto">.responsive-visibility() {<br>
display: block !important;<br>
table&amp;  { display: table; }<br>
tr&amp;     { display: table-row !important; }<br>
th&amp;,<br>
td&amp;     { display: table-cell !important; }<br>
span&amp;   { display: inline !important; }<br>
}</p>
<p dir="auto">related to issues <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="16856611" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/8500" data-hovercard-type="pull_request" data-hovercard-url="/twbs/bootstrap/pull/8500/hovercard" href="https://github.com/twbs/bootstrap/pull/8500">#8500</a> , <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="14075731" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/7808" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/7808/hovercard" href="https://github.com/twbs/bootstrap/issues/7808">#7808</a> , <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="6609454" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/4929" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/4929/hovercard" href="https://github.com/twbs/bootstrap/issues/4929">#4929</a> ; using <code class="notranslate">.hidden-sm</code> to hide span within <code class="notranslate">.nav &gt; li &gt; a</code> .  Because class is <code class="notranslate">display: block</code> above -sm then text wraps to new line.  Would you consider <code class="notranslate">.hidden-*</code> classes to be <code class="notranslate">display: inline-block</code> instead ?</p>
<p dir="auto">Here's a jsfiddle of the two cases - but the repercussions could be greater outside of this situation so probably needs more consideration...  <a href="http://jsfiddle.net/jholl/P86yf/" rel="nofollow">http://jsfiddle.net/jholl/P86yf/</a></p>