Выровняйте некоторые элементы nav-pills по праву в Bootstrap 4

Question

Я использую Bootstrap 4-бета2 nav-pills реализовать интерфейс с вкладками.

Как выровнять некоторые элементы справа от экрана?

настройка ml-auto на последнем li пункт не работает. Расщепление ul в двоем ulне работает, потому что это позволяет tabright быть активным в то же время, как, скажем, tableft1,

<nav class="fixed-top bg-dark">
    <div class="navbar">
        <a class="navbar-brand" href="#tabmain">Brand</a>
        <ul class="nav nav-pills mr-auto">
            <li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
            <li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
            <li class="nav-pill"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
        </ul>
    </div>
</nav>

Answer 1

Оказывается navbar это flex, поэтому классы, специфичные для flex, помогают:

<nav class="fixed-top bg-dark">
    <div class="navbar justify-content-start flex-nowrap">
        <a class="navbar-brand" href="#tabmain">Brand</a>
        <ul class="nav nav-pills w-100">
            <li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
            <li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
            <li class="nav-pill ml-auto"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
        </ul>
    </div>
</nav>