使用 Bootstrap 隐藏响应式布局中的元素

设计响应式布局时，管理空间变得至关重要，尤其是在较小的屏幕上。 Bootstrap 为移动设备提供了对折叠菜单栏项目的支持，但是如果您想类似地隐藏其他页面元素怎么办？

解决方案：

Bootstrap 提供了允许您的类根据屏幕尺寸隐藏元素：

• 超小型设备： 手机(
• 小型设备： 平板电脑 (≥768px) - .visible-sm-* (显示），.hidden-sm（隐藏）
• 中型设备：桌面 (≥992px) - .visible-md-* （显示）、.hidden-md （隐藏）
• 大型设备： 桌面 (≥1200px) - .visible-lg-* (显示), .hidden-lg (隐藏)

示例用法：

在小屏幕上隐藏 .nav-pills 元素：

  ...

附加说明：

• 对于 Bootstrap 4，使用hidden-*-up（隐藏较大的断点）或hidden-*-down （隐藏较小的断点）。
• Bootstrap 3.2.0 已弃用 .hidden-* ，转而使用.visible-*.
• 在较旧的 Bootstrap 版本中，.hidden-phone 和 .hidden-tablet 已过时。