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

Question

我在导航栏上有一个菜单，它有一定的边距顶部和一定的边距右边，当导航栏折叠时我希望菜单有边距顶部 = 20px，而不影响导航栏不折叠时的边距顶部（它应该像以前一样返回到正常的边距顶部）。

标签： css

Answer 1

是的，听起来你可以做到这一点的一种方法是使用 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 或类，则媒体查询放置在您的正常菜单样式下方，否则它将被覆盖。