我正在尝试首次创建具有引导程序4和角度5的应用程序,但是向右对齐的导航栏链接正向左对齐。
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<a class="navbar-brand abs" href="#">Navbar 1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
我尝试了多个选项,但输出未得到纠正。因此请求帮助以获取链接:关于右对齐。
答案 0 :(得分:1)
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<a class="navbar-brand abs" href="#">Navbar 1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar" style="justify-content:flex-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Link</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>