Problema con Navbar (Bootstrap 4)

[eduar2083]

Gracias @DragonX por responder.
Funciona muy bien lo que me has indicado cambiar pero sucede que el segundo navbar que cambiaste por span debe contener 2 nav-item, uno para el link de Registro y otro para el Login, es por ello, que yo había utilizado la etiqueta ul. Realizando la modificación quedó de la siguiente manera y de momento va muy bien.

Código HTML:

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        
        <!-- Brand -->
        <a class="navbar-brand" href="#">Sistema</a>
            
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <!-- Navbar -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            
            <!-- links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Acerca de</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contacto</a>
                </li>
            </ul>
 
            <!-- Register & Login -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Registrar</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Iniciar sesión</a>
                </li>
            </ul>
        </div>
    </nav>
 

Ahora, la sección comentada como "Register & Login" varía una vez que el usuario ha ingresado al sistema y debe cambiarse por una etiqueta form que debe mostrar el nombre del usuario y un enlace para Desconectar la sesión, algo como esto:

Código HTML:

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        
        <!-- Brand -->
        <a class="navbar-brand" href="#">Sistema</a>
            
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <!-- Navbar -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            
            <!-- links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Acerca de</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contacto</a>
                </li>
            </ul>
 
            <!-- Hello & Logout -->
            <form action="/Account/LogOff" method="POST" id="logoutForm">
                <ul class="navbar navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Hola Pedro!</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Cerrar sesión</a>
                    </li>
                </ul>
            </form>
        </div>
    </nav>
 

Sin embargo, cuando se colapsa no se muestra el navbar del formulario como yo esperaba ya que quisiera que se alinearan a la izquierda como los otros links; o mejor aún, cómo haría para que se alinearan a la derecha cuando se colapsa.

Además observo también que el formulario hace más ancho el navbar, algo anda muy mal :(


EDITO: Ya logré solucionarlo ha sido un error colocar los nav-item dentro del form cuando debería ser a la inversa:

Código HTML:

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        
        <!-- Brand -->
        <a class="navbar-brand" href="#">Sistema</a>
            
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
 
        <!-- Navbar -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            
            <!-- links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Acerca de</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contacto</a>
                </li>
            </ul>
 
            <!-- Hello & Logout -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Hola Pedro!</a>
                </li>
                <li class="nav-item">
                    <form action="/Account/LogOff" method="POST" id="logoutForm">
                        <a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Cerrar sesión</a>
                    </form>
                </li>
            </ul>
        </div>
    </nav>
 

Y con esto ya va bien de momento. Si hubiera alguna observación u mejor por favor agradecería me la indiquen.

Saludos cordiales.

Saludos.