使用引导程序隐藏显示答案

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

【讨论】：