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

Posted 2023-03-06

【中文标题】Bootstrap3 .visible-* .hidden-* 显示内联

【英文标题】：Bootstrap3 .visible-* .hidden-* display inline

【发布时间】：2013-10-06 13:28:45

【问题描述】：

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

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

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

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

---

编辑

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

感谢您的最新回答！

【问题讨论】：

这已被提议并被拒绝：github.com/twbs/bootstrap/issues/8869

不确定他们是否完全拒绝了它。他们最后提到了 v3.1。拥有.visible-inline-lg 对我来说很有意义。

@AugustinRiedinger，看起来他们在 v.3.2.0 中修复了这个问题，增加了显示特定的响应可见性类。查看我的完整更新答案。

【参考方案1】：

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

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

实现以下功能：

visible-inline-* hidden-inline-*

和

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

【参考方案2】：

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

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

【讨论】：

@AugustinRiedinger 它通过使用hidden-xs hidden-sm hidden-lg而不是visiblem-md来解决显示内联问题。

难道“隐藏”与“可见”完全相反吗？

hidden 将从您选择的尺寸中隐藏，visible 将从您需要的屏幕尺寸中显示

【参考方案3】：

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

【参考方案4】：

Bootstrap v3.2.0 更新

现在在 Bootstrap v3.2.0 中使用 this commit 原生解决了这个问题

根据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>

---

其他实例

在 *** 上询问：

Bootstrap 3 class visible-lg moves span to a new line

在引导问题中报告：

#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

【讨论】：

感谢您的更新。知道他们为什么不创建 .hidden-*-* 吗？

@Kekito, hidden-* 没有损坏，因为它会 only hide elements based on screenwidth，这不需要设置显示类型

很好，.visible--block 可用。但是为什么对应的 .hidden--block 不可用呢？