引导程序4 |对齐< ul>向右 [英] Bootstrap 4 | Align <ul> to right

问题描述

我要在标题的右边对齐列表，这是代码

I want to align a list to right on header, this is the code

<div class="collapse navbar-collapse" id="app-header-nav">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#solution">Solution
        <span class="sr-only">(current)</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#company">Company</a>
    </li>
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#openings">Openings</a>
    </li>
    <li style="display:none" id="getStartedHeader" class="nav-item">
        <a class="nav-link navbarMenuItem getStartedButtonHeader" data-toggle="modal" data-target="#getStartedModal">Get Started</a>
    </li>
    <li class="nav-item">
      <a class="app-login nav-link" href="undefined">Login</a>
    </li>
  </ul>
</div>

我尝试使用float，ml-auto和justify-content-end，但是什么也没有，有一种新方法可以将div上的所有内容与引导4上的text-right对齐?

I tried with float, ml-auto and justify-content-end, but nothing, there's a new way to align everything on div to right like text-right on bootstrap 4?

这就是我所需要的.

推荐答案

现在BS 4具有flexbox，对齐更加容易.以下是在Bootstrap 4导航栏中的左，右和中间的示例.

Now that BS 4 has flexbox, alignment is much easier. Here are examples for left, right and center in the Bootstrap 4 Navbar.

这个答案是从以下地方复制来的: 查看全文