css – Bootstrap3 .visible- * .hidden- * display inline

前端之家收集整理的这篇文章主要介绍了css – Bootstrap3 .visible- * .hidden- * display inline前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Bootstrap有一些很好的.visible- *(例如.visible-lg)类实用程序,用于根据屏幕大小选择要显示或隐藏的内容

当使用这些类时,它应用样式显示:block!important;当在正确的屏幕尺寸。

但有时候,我想使用它显示inline或inline-block的一些元素。

我怎么能干净地覆盖一些引导规则有选择?或者应该是引导中的功能请求?

编辑

似乎我不是唯一一个想知道这个问题。这是github issue

感谢最新的答案!

解决方法

更新Bootstrap v3.2.0

现在这在Bootstrap v3.2.0与this commit本地解决

根据new responsive classes documentation

As of v3.2.0,the .visible- classes for each breakpoint come in three variations,one for each CSS display property value listed below:

Group of classes          | CSS display
 .visible-*-block         |  display: block;
 .visible-*-inline        |  display: inline;
 .visible-*-inline-block  |  display: inline-block;

例如,您可以使用:

<p>Device is: <span class="visible-lg-inline">Large</span></p>

其他实例

被问及Stackoverflow:

> Bootstrap 3 class visible-lg moves span to a new line

在Bootstrap中报告问题:

> #4929 – Responsive utility classes may cause unexpected wrapping
> #7808 – Using display inherit in responsive utilities causes elements to be wrongly displayed
> #8500 – responsive class usage with inline element
> #8869 – responsive .hidden-* classes change from display block to inline-block
> #10263 – visible-xs makes display=block even for inline elements

猜你在找的CSS相关文章