如何在 Bootstrap 3 的移动/平板电脑视图中隐藏某些内容？答案

【问题标题】：How to hide something in mobile/tablet view in Bootstrap 3?如何在 Bootstrap 3 的移动/平板电脑视图中隐藏某些内容？
【发布时间】：2015-01-19 18:47:34
【问题描述】：

我的 Carousel 滑块中有一个按钮，我想在桌面上显示该按钮，但在移动/平板设备上隐藏： http://www.doorsets.org.uk/index.php

这在 Bootstrap 3 中可行吗？我知道我显然可以根据设备更改列，但我不清楚如何根据设备隐藏/显示部分。

如果能提供任何建议，我们将不胜感激。另外，您是否推荐一个好的 Bootstrap 3 论坛？

非常感谢新泽西州

【问题讨论】：

【解决方案1】：

这是我认为您正在寻找的文档：

您需要包装要隐藏/显示所需类的内容。

例如，如果您想在小（平板电脑）屏幕上隐藏部分：

<section class="hidden-sm">
    <p>This content won't be visible on a tablet, or screen resolution ≥768p and < 992px</p>
</section>

相反，如果您只想在平板电脑上显示某些内容：

<section class="visible-sm">
    <p>This content will only be visible on a tablet, or screen resolution ≥768px and < 992px</p>
</section>

对于您的按钮，类似这样的内容只会出现在中大屏幕上：

<div class="btn btn-primary visible-md visible-lg">Carousel Button</div>

【讨论】：

谢谢你摩根。我想这可能最好用 CSS 中的媒体查询来完成，这样你不想看到的页面部分就不会被加载，我假设当你使用响应式实用程序类时会发生这种情况？我无法让 hidden-sm 工作，但 visible-* 很有效。非常感谢。
@NathonJones，这是使用媒体查询完成的。请注意，如果您想在手机上隐藏，则需要使用 hidden-xs
请注意，hidden-sm 并不是平板电脑专用的。因此，如果您同时需要平板电脑和移动设备，则必须在该元素的 class 属性中使用 hidden-sm hidden-xs 以将其隐藏在两者中。