如何防止桌面上的 Bootstrap 响应式菜单自动关闭？

Bootstrap 中的响应式菜单自动关闭

问题：

在 Bootstrap 网站中，单击“产品”按钮时，响应式菜单会打开一个白色栏。然而，当网站处于桌面模式时，单击按钮会无意中缩小菜单。

解决方案：

为防止在桌面上单击时菜单折叠，避免添加额外的 JavaScript。相反，修改菜单列表项以包括数据切换和数据目标选择器。例如：

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

对每个菜单项重复此步骤。

修复溢出问题的扩展解决方案：

解决溢出和闪烁问题问题，请合并以下代码：

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

这使得切换和目标选择器特定于屏幕尺寸，消除较大屏幕上的故障。

引导程序版本兼容性：

请注意，Bootstrap 版本 4.1.3 和 5.0 中已弃用可见/隐藏类。使用 d-none d-sm-block 代替hidden-xs，使用 d-block d-sm-none 代替visible-xs。在 Bootstrap 版本 5 中，将 data-toggle 替换为 data-bs-toggle，将 data-target 替换为 data-bs-target。

以上是如何防止桌面上的 Bootstrap 响应式菜单自动关闭？的详细内容。更多信息请关注PHP中文网其他相关文章！