【问题标题】: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>

【问题讨论】:

标签: 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 上询问:

    在引导问题中报告:

    【讨论】:

    • Kyle,对不起,我之前没有看到你的回复。我发现 - 在发布我的答案后 - 内联 !important 根本不起作用。当我有“display: inline !important”时会发生什么,“visible-lg”被完全忽略。我现在将按照您的建议尝试使用 CSS 样式,看看它是否效果更好。非常感谢!
    • @Hidalgo,没问题!很高兴你也能自己解决问题!一个好的经验法则是在提出问题后停留一段时间,因为这是跟进问题的主要窗口。但这不是什么大问题。还记得接受您提出的最能解决您问题的问题的任何答案。
    猜你喜欢
    • 1970-01-01
    • 2022-11-22
    • 2022-01-17
    • 1970-01-01
    • 2013-08-04
    • 2013-12-29
    • 2014-05-15
    • 2013-10-24
    • 2018-07-03
    相关资源
    最近更新 更多