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

Question

Bootstrap 有一些不错的 .visible-*(例如 .visible-lg)类实用程序，用于根据屏幕尺寸选择显示或隐藏的内容。

使用这些类时，它会在屏幕尺寸正确时应用样式 display: block !important;。

但有时，我想将它用于一些显示为 inline 或 inline-block 的元素。

我怎样才能干净地覆盖一些 Bootstrap 规则来进行选择？或者它应该是 Bootstrap 中的功能请求？

---

编辑

看来我不是唯一想知道这个问题的人。这是 github issue .

感谢您的最新答复!

Answer 1

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:

<b>Group of classes</b>          | <b>CSS display</b>
 .visible-*-block         |  display: block;
 .visible-*-inline        |  display: inline;
 .visible-*-inline-block  |  display: inline-block;

例如，您可以使用:

<p>Device is: <span class="<b>visible-lg-inline</b>">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