导航栏折叠后的菜单边距Bootstrap 4

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (44)

我在导航栏上有一个菜单,它有一定的边距顶部和一定的边距右边,当导航条折叠我希望菜单有margin-top = 20px而不影响margin-top当导航栏不是collpase(它shoudl回到正常的margin-top,就像之前一样)。

提问于
用户回答回答于

是的,这听起来像你可以做到这一点的方法是使用css媒体查询,但正如有人说,请分享代码。

@media screen and (max-width: 480px) {
     li.menu {
     margin-top: 20px;
  }
}

最大宽度设置为您想要的位置,“li.menu”定位您希望更改边距的元素。

不要忘记将视口元标记添加到您的头部以及媒体查询的工作。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

另外,请确保您没有使用特定于该菜单项的ID或类,将媒体查询置于普通菜单样式下方,否则将被覆盖。

用户回答回答于

您可以在javascript中执行此操作,也可以使用css。当菜单崩溃时,这是因为我们像电话一样在较小的屏幕上。你可以复制你的菜单,并在它与你的边缘折叠时隐藏它。

或第二选项最佳选择。当您在某个屏幕上时,使用媒体查询来执行此操作

扫码关注云+社区

领取腾讯云代金券