我是Bootstrap的新手。
在Bootstrap 4中,我想使用固定顶部的品牌Navbar。导航栏应显示品牌,6个导航项和一个下拉列表:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</li>
</ul>
</div>
</nav>
在大视口上,页面将显示在宽度为1200像素的容器中。
我想修改Navbar元素的水平位置,以使6个导航项在1,200px容器中水平居中,brand元素在容器的左端开始,而dropdown元素在容器的右端开始容器:
在较小的视口中,导航栏应遵循其标准行为,即应折叠并显示汉堡包(其中包含6个菜单项以及下拉菜单),品牌元素应在视口的左侧水平开始。
我该如何实现?
编辑:
此代码
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav m-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
之后的<nav...>
。这给出了1200像素的容器。<ul class="navbar-nav">
而不是一个。这会将6个导航项与下拉菜单分开。<ul class="navbar-nav">
使用m-auto
。这会将6个导航项居中,并将下拉列表推到右侧。但是结果不是应该的。品牌元素应在居中1200px的左端开始,下拉元素应在居中1200px的右端开始:
在div mx-lg-auto
上添加类别.navbar-nav
mx-auto将使元素居中,而lg
部分将检查视口宽度是否为1200px或更大。
小提琴:https://jsfiddle.net/oLet2w6k/
Bootstrap doc:https://getbootstrap.com/docs/4.3/utilities/spacing/#horizontal-centering
尝试此代码:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand mr-0" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
<div class="nav-item dropdown flex-row justify-content-md-center justify-content-start flex-nowrap">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</div>
</div>
</nav>