Bootstrap 3响应类更改显示属性

Question

将我的项目从Bootstrap 2.3升级到Bootstrap 3.0时，我注意到添加了一个响应式类，例如hidden-sm到元素，将其CSS显示属性更改为block。

更糟糕的是，新的显示属性设置为!important，使得自定义CSS规则覆盖变得困难（或者至少很难看）。

例如，代码（在此处查看结果：http://jsfiddle.net/RZ95F/）

<h1>
  Heading
  <small>sub-Heading</small>
</h1>

给出与代码不同的结果（查看结果：http://jsfiddle.net/vTuW8/）

<h1>
  Heading
  <small class="hidden-sm">sub-Heading</small>
</h1>

即在标题和子标题之间添加换行符。

当然，这种奇怪的行为也适用于更复杂的情况，这使我很难在没有主要标记和CSS更改的情况下升级我的项目，只是为了弥补这种新的Bootstrap行为。

Bootstrap团队通过更改这些元素的display行为来尝试完成什么？是否有一个简单的解决方法来恢复Bootstrap 2.3及更早版本中已知的行为？

Answer 1

这在GitHub上被追踪为#8869。显示的一个简单的解决方法是添加一个单独的内联辅助类：

.hidden-inline-xs {
    display: inline !important;
}
@media (max-width: 767px) {
  .hidden-inline-xs {
    display: none !important;
  }
}

然后你可以使用

<h1>
  Heading
  <small class="hidden-inline-xs">sub-Heading</small>
</h1>