Question

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

<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>

Answer 1

使用隐藏或可见（尽量不使用可见，见下文），而不是同一类

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的解释答案）

Answer 2

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>

Answer 3

扩展其他两个答案：

只对单个元素使用隐藏或可见（如上所述）
请注意，visible- *现已弃用。相反，最后应该有一个显示属性。一个例子是visible-md-block。请参阅此主题：Hiding elements in responsive layout?

以下是使用您提供的代码的动画：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>

使用bootstrap隐藏显示

3 个答案: