我使用 Bootstrap 4 并将 navbar-brand
设置为中心,将所有元素设置为右侧。我想在 navbar-brand
下方设置我的 nav
元素。
此外,我想将“登录”和“注销”设置到nav
的右侧,但是使用mr-auto
不起作用。
html:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand">Academind</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ">
<li class="nav-item ">
<a href="#" class="nav-link">Users</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
<ul class="navbar-nav mr-auto ">
<li class="nav-item ">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Log out</a>
</li>
</ul>
</div>
</nav>
CSS:
@media (min-width: 768px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
最佳答案
要右对齐登录,您可以使用 ml-auto
自动填充左侧,这会将链接推到右侧.
选项 1:
然后调整导航栏的min-height
。使用 align-items-end
将链接推到底部,并根据需要在顶部对齐品牌。这将给出 2 行导航栏的外观。
@media (min-width: 567px) {
.navbar-brand
{
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.navbar {
min-height: 90px;
}
}
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand">Academind</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse align-self-end" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Users</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Log out</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/07ibCvkQJi
选项 2:(删除额外的 CSS)
只需将 flex-column
应用于 navbar
,并将品牌和切换器包装在一个 flexbox div 中。使用自动边距工具使品牌居中。
<nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch">
<div class="d-flex">
<a href="#" class="navbar-brand mx-sm-auto mr-auto">Academind</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse w-100" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Users</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Logout</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/qVJPhAy6fS
关于html - 如何在我的导航栏中将 'nav' 元素移动到 'navbar-brand' 下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55077119/