Html 如何移动';导航';下的元素';navbar品牌';在我的导航栏里
我使用Bootstrap 4,将Html 如何移动';导航';下的元素';navbar品牌';在我的导航栏里,html,css,flexbox,bootstrap-4,navbar,Html,Css,Flexbox,Bootstrap 4,Navbar,我使用Bootstrap 4,将navbar brand设置为中心,将所有元素设置为右侧。我想在navbar品牌下设置我的nav元素 另外,我想将“登录”和“注销”设置在nav的右侧,但使用mr auto不起作用 html: 要右对齐登录,您可以使用ml auto自动填充左侧,这将把链接推到右侧 选项1: 然后调整导航栏的min height。使用align items end将链接推到底部,并根据需要在顶部对齐品牌。这将提供2个导航栏行的外观 @media (min-width: 567px
navbar brand
设置为中心,将所有元素设置为右侧。我想在navbar品牌下设置我的nav
元素
另外,我想将“登录”和“注销”设置在nav
的右侧,但使用mr auto
不起作用
html:
要右对齐登录,您可以使用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>
相关的:
您可以使用bootstrap4类d-flex
,无需任何额外的CSS:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="w-100 d-flex flex-column">
<div class="w-100 d-flex justify-content-center align-items-center">
<a href="#" class="navbar-brand">Academind</a>
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<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>
</div></nav>
-
-
-
-
演示:问题是下拉菜单的动画被破坏。修复动画的方法是复制代码“”的第一行,并将其粘贴到“”之前。导航中的导航基本上。。。
@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>
<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>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="w-100 d-flex flex-column">
<div class="w-100 d-flex justify-content-center align-items-center">
<a href="#" class="navbar-brand">Academind</a>
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<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>
</div></nav>