在容器块元素上浮动汉堡菜单

Question

我有一个 bootstrap 容器，其样式为

.container {
    margin-top: 12em;
    font-family: 'Amatic SC', cursive;
    border-bottom: 1px solid;
    border-color: #800000;
}

这样做的原因是我希望桌面上的导航栏浮动在屏幕中间，距离顶部 12em。由于 bootstrap 自动样式，它似乎是块显示。

当我切换到移动设备时，我会显示一个汉堡菜单，但我希望它位于屏幕的右上角，它当前被容器向下推，即使我浮动它也是如此。 CSS 下面：

.navbar-toggle,
.collapsed {
    position: absolute;
    top: 1em;
    right: 1em;
}

请帮忙！

Answer 1

所以基本上我添加了查询，以便当屏幕尺寸小于 768 像素（移动设备）时容器将删除顶部边距。

我建议您为容器添加一个 class 或 id，因为向容器添加边距值从技术上讲会为您要在项目中制作的所有容器添加边距。让我知道。

Floating burger menu over container block element