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

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

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

解决方案：

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

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

用法示例：

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

<div class="nav-pills hidden-xs">
  ...
</div>

附加说明：

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

以上是如何使用 Bootstrap 隐藏响应式布局中的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！