如何在 Bootstrap 中通过产品菜单单击关闭响应式导航？

在 Bootstrap 中通过单击产品菜单关闭响应式导航

以响应式模式展开主菜单时，您可能会遇到自动折叠的问题单击“产品”菜单项。要解决此问题，您可以利用 Bootstrap 的内置数据属性和类。

不要使用额外的 JavaScript，而是将以下数据属性添加到菜单列表项中：

重复此操作

响应式设计的额外调整

要解决内容溢出和大屏幕上闪烁的问题，请使用以下代码：

这会根据屏幕尺寸分配特定的数据属性，消除桌面菜单上的故障。

更新 Bootstrap 版本

适用于 Bootstrap 版本 4.1.3 和 5.0 ，将可见/隐藏类替换为 d-none d-sm-block 和 d-block d-sm-none。

在 Bootstrap 5 中，修改 data 属性为 data-bs-toggle 和 data-bs -target.

通过这些调整，您可以自动关闭响应式导航栏并显示产品菜单，而不会在不同屏幕尺寸下出现功能问题。

以上是如何在 Bootstrap 中通过产品菜单单击关闭响应式导航？的详细内容。更多信息请关注PHP中文网其他相关文章！