桌面上的 Bootstrap Sidenav 样式

Posted 2023-05-08

【中文标题】桌面上的 Bootstrap Sidenav 样式

【英文标题】：Bootstrap Sidenav Styling on Desktop

【发布时间】：2019-08-11 13:37:22

【问题描述】：

我有一个引导导航栏，它有一个菜单，在点击移动设备和小视口时会从右侧滑出。在桌面上查看时，我希望应用导航栏的标准引导样式（没有菜单按钮，菜单项直接内联显示在导航栏中）。它似乎在小视口上按预期工作，但在桌面上它似乎仍然采用媒体查询的样式。我想我忽略了一些东西。那里的任何人都可以就我在这里做错了什么提出建议吗？ 代码和示例可以在here 找到。

【参考方案1】：

在媒体查询中，只需将 min-width 更改为 max-width:500px，之后它应该可以工作。

【讨论】：

感谢回复，如果我改成最大宽度，在桌面上看起来不错，但在移动端，菜单动画不再从右侧滑出，而只是表现得像标准的 Bootstrap 动画（从顶部下降）

我认为这是因为小型设备的引导断点是 768 像素，因此请尝试将最大宽度改为 767 像素

这绝对是正确的路径。我按照您的建议将最大宽度设置为 768，并获得了混合（更好）的结果。导航栏现在可以在台式机和移动设备上正确显示，但在平板电脑尺寸 (880 X 484) 中，它的行为仍然类似于标准下拉引导导航。

好吧，只要找到带有查询的完美设置，这就是关键，良好的编码。