<p dir="auto">...Which works allright, except when you put them on elements which you want to be display:block-inline.</p>
<p dir="auto">This technique destroys this option, forcing you to use floats or positions instead for layout.</p>
<p dir="auto">Why not just rely on set display:none !important when the element needs to be hidden?</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>