Bootstrap3 .visible-* .hidden-* 显示内联 [英] Bootstrap3 .visible-* .hidden-* display inline

问题描述

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

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

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

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

<小时>

编辑

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

感谢您的最新回答！

解决方案

更新 Bootstrap v3.2.0

这个问题现在在 Bootstrap v3.2.0 中通过这个提交

根据新的响应类文档:

<块引用>

从 v3.2.0 开始，每个断点的 .visible-- 类有三种变体，一种用于下面列出的每个 CSS 显示属性值:

类组 |CSS 显示.visible-*-block |显示:块；.visible-*-inline |显示:内联；.visible-*-inline-block |显示:内联块；

例如，您可以使用:

<p>设备是:<span class="visible-lg-inline">Large</span></p>

<小时>

其他实例

在 Stackoverflow 上询问:

• Bootstrap 3 class visible-lg 将跨度移动到新行

在 Bootstrap 问题中报告:

• #4929 - 响应式实用程序类可能会导致意外包装
• #7808 - 在响应式实用程序中使用显示继承会导致元素显示错误
• #8500 - 使用内联元素的响应式类
• #8869 - 响应式 .hidden-* 类从显示块变为内联块
• #10263 - 即使对于内联元素，visible-xs 也使 display=block

Bootstrap has some nice .visible-* (eg. .visible-lg) class utility for selecting what to show or hide depending on the screen size.

When using those classes, it applies the styling display: block !important; when in the correct screen size.

But sometimes, I'd like to use it for some elements that are displayed inline or inline-block.

How could I cleanly override some bootstrap rules to have the choice? Or should it be a feature request in bootstrap?

---

EDIT

Seems like I'm not the only one wondering about this issue. Here's the github issue.

Thanks for the latest answer!

解决方案

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:

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

Reported in Bootstrap Issues:

• #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

这篇关于Bootstrap3 .visible-* .hidden-* 显示内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！