我是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的右端开始: