<nav class="navbar-toggleable-sm" role="navigation">
<div class="container justify-content-center">
<div class="navbar-brand navbar-brand-centered">Brand</div>
<ul class=" navbar-nav float-left">
<li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
<li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
<li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
</ul>
<ul class=" navbar-nav float-right">
<li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
<li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
<li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
我已经开始在这里学习bootsrap 4我希望我的导航就像前三个链接到左侧,其他链接到我的品牌标识右侧,整个容器也被称为中心。
答案 0 :(得分:-1)
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="#">BRAND</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>