Bootstrap3 .visible-*.hidden-*显示内联

Question

Bootstrap有一些很好的.visible-*(例如.visible-lg)类实用程序,用于根据屏幕大小选择要显示或隐藏的内容.

使用这些类时,它会display: block !important;在正确的屏幕大小时应用样式.

但有时,我想将它用于显示inline或显示的某些元素inline-block.

我怎么能干净地覆盖一些引导规则才能做出选择？或者它应该是bootstrap中的功能请求？

---

编辑

好像我不是唯一一个对这个问题感到疑惑的人.这是github问题.

谢谢你的最新答案!

Answer 1

Bootstrap v3.2.0的更新

现在使用此提交在Bootstrap v3.2.0中本地解决了这个问题

根据新的响应类文档:

从v3.2.0开始,每个断点的.visible- -类有三种变体,一种用于下面列出的每个CSS显示属性值:

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类visible-lg移动到新行

在Bootstrap问题中报告:

• #4929 - 响应式实用程序类可能会导致意外包装
• #7808 - 在响应实用程序中使用显示继承会导致错误地显示元素
• #8500 - 内联元素的响应式类使用
• #8869 - responsive .hidden-*类从显示块更改为内联块
• #10263 - visible-xs使得display = block甚至是内联元素

Answer 2

这在v3.1中已得到修复.

.visible-lg或.visible-md将强制display: block !important;但使用.hidden-xs或.hidden-sm将显示内联.

Answer 3

以下库扩展了具有内联和内联块变体的可见助手类:

https://github.com/moappi/bootstrap.inline-responsive

实现以下内容:

• visible-inline-*
• hidden-inline-*

和

• visible-inline-block-*
• hidden-inline-block-*