CSS-Bootstrap 3 .visible- * .hidden- *内联显示

Bootstrap具有一些不错的inline(例如inline-block)类实用程序,用于根据屏幕尺寸选择要显示或隐藏的内容。

使用这些类时,在正确的屏幕尺寸下,它将应用样式inline

但是有时,我想将其用于inlineinline-block中显示的某些元素。

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


编辑

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

感谢您的最新答案!

4个解决方案
63 votes

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-响应式.hidden- *类从显示块更改为嵌入式块
  • #10263-visible-xs甚至对内联元素也使display = block
KyleMit answered 2020-02-22T22:37:30Z
15 votes

在v3.1中,此问题已得到修复。

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

Pratyush answered 2020-02-22T22:37:55Z
12 votes

以下库通过内联和内联块变体扩展了可见的帮助器类:

[HTTPS://GitHub.com/摸啊皮皮/bootstrap.inline-responsive]

实现以下内容:

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

  • hidden-inline-block-*
  • hidden-inline-block-*
Chad Brown answered 2020-02-22T22:40:37Z
1 votes

更新到引导程序3.1或更高版本确实可以解决问题,因为从hidden-类到此,仅隐藏标记,不再设置display: block。 这样,您可以将<div>用于块上下文,将<span>用于内联块上下文(这些标记的正常行为)

dhm80 answered 2020-02-22T22:40:57Z
translate from https://stackoverflow.com:/questions/19098376/bootstrap3-visible-hidden-display-inline