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

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

正如您所注意到的，Bootstrap 为较小屏幕上折叠导航菜单项提供了本机支持。然而，在类似的情况下，您可能还想隐藏页面上的其他元素。

介绍 Bootstrap 的可见性类

为了解决这一需求，Bootstrap 提供了一组可见性允许您根据屏幕尺寸控制元素的存在的类。这些类包括：

• visible-xs-block、hidden-xs：隐藏超小型设备（小于 768 像素）上的元素。
• visible-sm-block、hidden-sm：隐藏小型设备上的元素（768px 和上面）。
• visible-md-block、hidden-md：隐藏中型设备（992px 及以上）上的元素。
• visible-lg-block 、hidden-lg：隐藏大型设备上的元素（1200px 和上面）。

用法

要在小屏幕上隐藏元素，只需向其添加适当的隐藏类即可。例如，要隐藏您提到的导航药丸，您可以使用以下内容：

<code class="html"><ul class="nav nav-pills navbar-right hidden-sm">
  ...
</ul></code>

其他选项

在 Bootstrap 4 中，还有两种附加类型可见性类别：

• 隐藏-*-up：当视口位于给定断点或更宽时隐藏元素。
• hidden-*-down：当视口位于给定断点或更小时隐藏元素。

注意：旧版本的 Bootstrap 使用 .hidden-phone 和.visible-tablet，现已过时。

结论

通过利用 Bootstrap 的可见性类，您可以有效地管理元素在不同屏幕尺寸上的显示。这种多功能性使您能够创建能够优雅地适应不同设备尺寸的响应式布局。

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