html - Boostrap 4 - 移动设备上的项目对齐

Question

一个新手问题，但我正在为此奋斗将近两天。我将标题放在单独的行中，将两个按钮放在另一行时遇到问题。现在这三个元素在每一行中。我的目标是在顶部有标题，在导航栏底部有两个按钮。 https://www.codeply.com/go/bUI3pKQmR6

提前致谢。

标签： htmlcssbootstrap-4

Answer 1

您可以使用此 css 将按钮放置在距底部 10px 的位置，并将左侧的标题放置在 745px 下方，即它变为 2 行时：

@media only screen and (max-width: 745px) {
.navbar {
height: 100px;
}

.navbar-brand {
position: absolute;
left: 28px;
top: 10px;
}

.dropdown ,ml-auto {
position: absolute;
bottom: 10px;
right: 28px;
}

.navbar-toggler-icon {
position: absolute;
bottom: 10px;
}
}

编辑：我添加了css来设置导航栏的高度并将下拉按钮放置在右侧。