<div class="container d-flex align-items-center">
<nav class="nav-menu d-flex align-items-center">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
<li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
</ul>
</nav><!-- .nav-menu -->
这是我的代码,我想在右侧显示注册和登录
我添加了W-100
来扩展NAV
以适应整个容器,然后添加了justify-content-between
,它将子级放置在彼此之间的所有空间中...
<div class="container d-flex align-items-center">
<nav class="nav-menu d-flex w-100 justify-content-between">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
<li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
</ul>
</nav>
</div>
这里有一支笔要演示:https://codepen.io/paulmartin91/pen/gogjejz