Bootstrap 3类visible-lg移动到新行

Question

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

以下HTML呈现为一行:

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

但是,以下HTML呈现Large在下面的行Device is:

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

Answer 1

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>

原始的Bootstrap v3.0

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

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

在jsFiddle工作演示

对于更强大的方法,这里有一个库,为每种显示类型添加扩展类

其他实例

在Stackoverflow上被问到:

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

在Bootstrap问题中报告:

• #4929 - 响应式实用程序类可能会导致意外包装
• #7808 - 在响应实用程序中使用显示继承会导致错误地显示元素
• #8500 - 内联元素的响应式类使用
• #8869 - responsive .hidden-*类从显示块更改为内联块
• #10263 - visible-xs使得display = block甚至是内联元素