Allineamento giustificato nella navbar in Bootstrap 4

Guardando alla documentazione, la navbar di Bootstrap 4 ha già una classe CSS per allineare gli elementi.

A me non ha funzionato, non so perchè; però ho risolto in altra maniera.

Supponiamo di avere questa navbar:

<nav class="navbar navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown"
                   role="button"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    ABOUT
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown"
                   role="button"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    PROJECTS
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown"
                   role="button"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    ARCHIVE
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown"
                   role="button"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    NEWS*
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

Per fare un allineamento giustificato:

/**
GIUSTIFICO GLI ELEMENTI NELLA NAVBAR DI BOOTSTRAP
 */
.navbar-nav, .mr-auto {
    flex: 1;
    margin: auto !important;
    display: flex;
    justify-content: space-between;
}

Enjoy!