【问题标题】:hiding display using bootstrap使用引导程序隐藏显示
【发布时间】:2015-07-18 21:28:26
【问题描述】:

我尝试了以下代码以在移动设备和桌面设备中以不同方式显示。但两个句子同时显示。

<div>
    <div class="hidden-xs hidden-lg hidden-sm visible-md">  
        Page-under-Construction.Please-try-again-later.  
    </div>  
    <div class="hidden-md hidden-lg visible-xs">  
        Page-under-Construction.  
    </div>
</div>  

【问题讨论】:

  • 分享你试过的代码

标签: html twitter-bootstrap


【解决方案1】:

扩展其他两个答案:

  • 仅在单个元素上使用隐藏或可见(如上所述)
  • 请注意,visible-* 现在已被弃用。相反,最后应该有一个显示属性。一个例子是 visible-md-block 。看到这个线程:Hiding elements in responsive layout?

这是一个使用您提供的代码的 plunker:http://plnkr.co/edit/brjPCsh578WGu5Eq1rWl?p=preview

<div class="hidden-xs hidden-sm">
    Page-under-Construction. Please-try-again later.
</div>  
<div class="hidden-md hidden-lg">  
    Page-under-Construction.  
</div>

【讨论】:

  • 我是否需要更改浏览器中的任何设置,为此目的?bcz,代码在 plunker 中运行良好......但在我系统的 firefox 中没有
  • 没问题。需要明确的是, visible 本身并没有被弃用,只是最后没有显示属性。我提到的线程有一个彻底的解释。
  • @suryababy 不,您不需要更改浏览器中的设置。我的猜测是加载顺序的问题或具有旧版本的引导程序。
【解决方案2】:

使用隐藏或可见(尽量不要使用可见,见下文),不能在同一个类中使用

Bootstrap Responsive Utilities

<div>
<div class="hidden-xs hidden-sm">  
    Page-under-Construction.Please-try-again-later.  
</div>  
<div class="hidden-md hidden-lg">  
    Page-under-Construction.  
</div>

已编辑:如下所述,“可见”现已弃用(请参阅 Drew Thomas 的回答以了解解释)

【讨论】:

    【解决方案3】:

    Simple Sample

    还可以查看来自 Twitter Bootstrap 的 this 文档。

    仅对移动设备可见:

    <div class="visible-xs">
        Content to show in mobile  
    </div>  
    

    仅对移动设备隐藏:

    <div class="hidden-xs">
        Content to show in mobile  
    </div>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多