html - ¿Centrar los enlaces de la barra de navegación sin que la marca lo empuje hacia la derecha en Bootstrap 4?

bootstrap-4 twitter-bootstrap-4

Question

Estoy tratando de centrar mis enlaces de la barra de navegación, pero cuando lo hago, el logotipo de mi marca lo empuja hacia la derecha para que no esté centrado. Aquí está mi html ...

<nav class="navbar navbar-toggleable-md navbar-light main-nav">
  <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="index.html">Brand Name</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto clearfix">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>

  </div>
</nav> 

¿Cómo puedo evitar que el logotipo de la marca afecte la posición de mis enlaces de la barra de navegación?

Answer 1

Esto sucede debido a la forma en que los elementos adyacentes de flexbox se posicionan uno respecto al otro.

Una opción es usar las utilidades de flexbox y un elemento de marcador de posición de ancho completo a la derecha. La marca navbar también se establece en ancho completo w-100 clase de utilidad w-100 .

<nav class="navbar navbar-toggleable navbar-inverse bg-primary justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCenter">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href class="navbar-brand d-flex w-100 mr-0">Brand is Wider Name</a>
    <div class="navbar-collapse collapse" id="navbarCenter">
        <ul class="navbar-nav mx-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Center</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100"> </div>
</nav>

http://www.codeply.com/go/N7veP8FMqg

Otra opción es posicionar absolutamente el .navbar-nav ..

@media (min-width: 567px) {
    .abs-center-x {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }
}

https://www.codeply.com/go/RCBftzZCD8

Relacionado:
Botón de alternar del menú Bootstrap 4 a izquierda y derecha, con la marca en el centro
¿Cómo se podría CENTRAR el LOGOTIPO y no colapsar y debería aparecer el icono de alternar a la izquierda en la barra de navegación?