使用 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中文网其他相关文章！
