Bem, eu quero conseguir isso:https://i.imgur.com/BDM7JvD.jpg usando a barra de navegação do Bootstrap 4.

Como posso centralizar os links de navegação / itens no meio da janela de exibição usando os utilitários flexbox ou mr-auto etc. Estou tentando evitar uma abordagem de posicionamento baseada em CSS, pois pode parecer diferente em dispositivos. Mas com certeza se uma abordagem de CSS promete estar na mesma posição centralizada, por que não!

NOTA: algumas pessoas podem dizer para usar os utilitários justificativos, o baile é que você não pode usá-los como a marca navbar e o navbar-nav não pode estar dentro de uma div. Se eu fizer isso, o layout estraga.

nav class = "navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">

        <div class="container">

            <button class="navbar-toggler navbar-toggler-right" 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>

            <a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Disabled</a>
                    </li>
                </ul>
            </div>

        </div>

    </nav>