Html 汉堡包菜单显示在桌面设备上_Html_Css_Bootstrap 4

Html 汉堡包菜单显示在桌面设备上

html css bootstrap-4

Html 汉堡包菜单显示在桌面设备上,html,css,bootstrap-4,Html,Css,Bootstrap 4,我有一个使用bootstrap 4和BEM方法的简单导航栏，当我运行我的应用程序时，汉堡包菜单显示在桌面设备中，而不是隐藏以下是指向JSFIDLE的链接： HTML 我在代码中做错了什么？如果有任何帮助建议，请纠正我，如果我做错了。thank看起来您缺少响应类，因此该类将在所需设备上隐藏/可见如果希望它仅在“xs”屏幕上可见，则应添加以下类： .d-block .d-sm-none 这是一个更新的JSFIDLE（您可能需要展开窗口才能看到它消失）—— 从Bootstrap 4文档中提取：

我有一个使用bootstrap 4和BEM方法的简单导航栏，当我运行我的应用程序时，汉堡包菜单显示在桌面设备中，而不是隐藏

以下是指向JSFIDLE的链接：

HTML

我在代码中做错了什么？如果有任何帮助建议，请纠正我，如果我做错了。thank

看起来您缺少响应类，因此该类将在所需设备上隐藏/可见

如果希望它仅在“xs”屏幕上可见，则应添加以下类：

.d-block .d-sm-none

这是一个更新的JSFIDLE（您可能需要展开窗口才能看到它消失）——

从Bootstrap 4文档中提取：

隐藏元素为了更快地进行移动友好型开发，请使用响应显示类按设备显示和隐藏元素。避免为同一站点创建完全不同的版本，而是根据每个屏幕大小相应地隐藏元素

要隐藏元素，只需使用.d-none类或.d-{sm，md，lg，xl}-none类中的一个类来实现任何响应屏幕变化

要仅在给定的屏幕大小间隔上显示元素，可以将一个.d--none类与一个.d--*类组合，例如.d-none.d-md-block.d-xl-none将隐藏除中型和大型设备之外的所有屏幕大小的元素

屏幕大小：类别

全部隐藏：.d-none

仅在xs上隐藏：.d-none.d-sm-block

仅在sm上隐藏：.d-sm-none.d-md-block

仅在md上隐藏：.d-md-none.d-lg-block

仅在lg上隐藏：.d-lg-none.d-xl-block

仅在xl上隐藏：.d-xl-none

全部可见：.d-block

仅在xs上可见：.d-block.d-sm-none

仅在sm上可见：.d-none.d-sm-block.d-md-none

仅在md上可见：.d-none.d-md-block.d-lg-none

仅在lg上可见：.d-none.d-lg-block.d-xl-none

仅在xl上可见：.d-none.d-xl-block

看起来您缺少一个响应类，因此它在您想要的设备上是隐藏/可见的