Bootstrap 3 class visible-lg 将 span 移动到新行答案

【问题标题】：Bootstrap 3 class visible-lg moves span to a new lineBootstrap 3 class visible-lg 将 span 移动到新行
【发布时间】：2014-06-11 17:41:19
【问题描述】：

如何让visible-lg 类不将跨度移动到新行？

以下 HTML 呈现为一行：

<p>Device is:<span>Unknown</span></p>

然而，下面的 HTML 在Device is 下一行呈现Large：

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

【问题讨论】：

Bootstrap3 .visible-* .hidden-* display inline 的可能重复项

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这个问题的解决方法是为class="visible_lg"的span设置内联样式如下：

style="display: inline !important"

"!important" 是关键，因为 Bootstrap 3 将此样式设置为 "block !important"

【讨论】：

【解决方案2】：

Bootstrap v3.2.0 更新

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

根据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 v3.0 原创

在 Bootstrap 3.0 中，所有可见和隐藏的响应类都使用 display:block !important;
如果要内联显示元素，则必须覆盖它：

@media (min-width: 1200px) {
  span.visible-lg {
    display: inline !important
  }
}

Working Demo in jsFiddle

对于更强大的方法，这里是library that adds extension classes for each display type

其他实例

在 Stackoverflow 上询问：

Bootstrap3 .visible-* .hidden-* display inline

在引导问题中报告：

【讨论】：

Kyle，对不起，我之前没有看到你的回复。我发现 - 在发布我的答案后 - 内联 !important 根本不起作用。当我有“display: inline !important”时会发生什么，“visible-lg”被完全忽略。我现在将按照您的建议尝试使用 CSS 样式，看看它是否效果更好。非常感谢！
@Hidalgo，没问题！很高兴你也能自己解决问题！一个好的经验法则是在提出问题后停留一段时间，因为这是跟进问题的主要窗口。但这不是什么大问题。还记得接受您提出的最能解决您问题的问题的任何答案。