Bootstrap 4将导航栏项目向右对齐

如何将导航栏项目右对齐?

我要登录并在右边注册。但是我尝试的所有方法似乎都无法正常工作。

导航栏的图片

到目前为止,这是我尝试过的:

  • <div>周围<ul>带有属性:style="float: right"
  • <div>周围<ul>带有属性:style="text-align: right"
  • <li>标签上尝试了这两件事
  • 再次尝试了所有这些事情,并!important添加到最后
  • 改变nav-itemnav-right<li>
  • 添加了一个pull-sm-right类的<li>
  • 添加了一个align-content-end类的<li>

这是我的代码:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>