1

在将我的项目从 Bootstrap 2.3 升级到 Bootstrap 3.0 时，我注意到添加响应类（例如添加hidden-sm到元素）会将其 CSS 显示属性更改为block.

更糟糕的是，新的 display 属性设置为!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 及更早版本中已知的行为？

4

1 回答 1

2

这在 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>
于 2013-10-21T13:41:16.050 回答