我使用Bootstrap 4并将navbar-brand
设置为中心,将所有元素设置为右侧。我想在nav
下面设置我的navbar-brand
元素。
另外,我想在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个Navbar行的外观。
@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
你可以使用bootstrap 4类qazxsw poi,没有任何额外的CSS:
d-flex
但是:Kua zxsw指出