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

Question

我在导航栏上有一个菜单，它有一定的边距顶部和一定的边距右边，当导航栏崩溃我希望菜单有margin-top = 20px而不影响margin-top当导航栏没有collpase（它会像之前那样回到正常的margin-top）。

Answer 1

是的，听起来你可以通过css媒体查询来实现这一点，但有人说，请分享代码。

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

最大宽度设置为您想要的位置，＆＃34; li.menu＆＃34;定位您希望更改边距的元素。

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

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

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

Answer 2

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

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