50

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

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

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

我怎样才能干净地覆盖一些引导规则以进行选择？还是应该是引导程序中的功能请求？

编辑

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

感谢您的最新答案！

4

4 回答 4

68

Update for Bootstrap v3.2.0

This is now natively solved in Bootstrap v3.2.0 with this commit

According to the 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;

For example, you could use:

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

Other Instances

Asked about on Stackoverflow:

Reported in Bootstrap Issues:

于 2014-07-13T17:43:22.563 回答
15

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

.visible-lgor.visible-md将强制display: block !important;但使用.hidden-xsor.hidden-sm将显示内联。

于 2014-02-06T06:39:29.670 回答
13

以下库使用内联和内联块变体扩展了可见的帮助程序类：

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

实现以下内容：

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

和

  • visible-inline-block-*
  • hidden-inline-block-*
于 2013-11-05T08:53:55.770 回答
1

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

于 2014-03-02T17:14:11.003 回答