Bootstrap 4 angular 5导航栏链接未向右对齐

时间:2018-08-05 11:08:01

标签: angular bootstrap-4

enter image description here我正在尝试首次创建具有引导程序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>

我尝试了多个选项,但输出未得到纠正。因此请求帮助以获取链接:关于右对齐。

1 个答案:

答案 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>