引导程序3响应类更改显示属性

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

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

来源

2013-10-21 m4r73n

“响应实用程序目前只适用于块表反复使用内联和表使用元素目前不受支持。“从http://getbootstrap.com/css/#responsive-utilities –

嗯，太好了。这是一个应该在alpha体育馆中解决的错误，或者至少在beta测试期间解决的错误。他们应该感到羞耻，称之为最终版本！ – m4r73n

这在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-21 13:41:16

引导程序3响应类更改显示属性

回答

相关问题