如何控制 Bootstrap 响应式布局中的元素可见性？

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

通过优化各种屏幕尺寸上的内容可见性来增强您的 Bootstrap 设计。 Bootstrap 提供了在较小设备上显示菜单项的功能，但是其他页面元素呢？

为了解决这个问题，Bootstrap 提供了“可见”和“隐藏”类，使您能够根据屏幕动态显示或隐藏元素尺寸。可用的类包括：

可见类：

• .visible-xs-block：在超小型设备（手机）上显示
• .visible-sm-block：在小型设备（平板电脑）上显示
• .visible-md-block：在中型设备（台式机）上显示
• .visible-lg-block：在大型设备上显示设备（桌面）

隐藏类：

• .hidden-xs：在超小型设备（手机）上隐藏
• .hidden-sm：在小型设备（平板电脑）上隐藏
• .hidden-md：在中型设备（台式机）上隐藏
• .hidden-lg：在大型设备（台式机）上隐藏

要在较小的屏幕上隐藏导航药丸，只需将 .hidden-xs 类添加到相应的容器即可。

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

或者，您可以使用“hidden-*-down” " 类，隐藏指定断点或更小的元素。

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

如果要显示指定断点或更宽的元素，请记住使用“visible-*-up”类。

有关 Bootstrap 响应式实用程序类的更多信息，请参阅其官方文档：http://getbootstrap.com/css/#responsive-utilities。

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