Question

Bootstrap有一些不错的.visible-*（例如。.visible-lg）类实用程序，用于根据屏幕大小选择要显示或隐藏的内容。

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

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

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

修改

似乎我不是唯一一个对此问题感到疑惑的人。这是github issue。

感谢您的最新答案！

Answer 1

Bootstrap v3.2.0更新

现在使用this commit

在Bootstrap v3.2.0中本地解决了这个问题

根据new responsive classes documentation：

从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 class visible-lg moves span to a new line

在Bootstrap问题中报道：

Answer 2

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

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

Answer 3

以下库使用inline＆amp;扩展了可见的助手类。内联块变体：

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

实现以下内容：

visible-inline-*
hidden-inline-*

和

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

Answer 4

更新到bootstrap 3.1或更高版本确实可以解决问题，因为hidden-类的这一点只隐藏标记而不再设置display: block。这样，您可以将<div>用于块上下文，将<span>用于内联块上下文（这些标记的正常行为）

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

4 个答案:

Bootstrap v3.2.0更新

其他实例