Foros del Web » Creando para Internet » CSS »

Problema con Navbar (Bootstrap 4)

 Estas en el tema de Problema con Navbar (Bootstrap 4) en el foro de CSS en Foros del Web. Buenas, Tengo el siguiente código html + Bootstrap: Código: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Navbar</title> <link ...
  #1 (permalink)  
Antiguo 12/02/2018, 20:58
 
Fecha de Ingreso: octubre-2014
Ubicación: Lima
Mensajes: 74
Antigüedad: 10 años, 1 mes
Puntos: 1
Problema con Navbar (Bootstrap 4)
Buenas,
Tengo el siguiente código html + Bootstrap:
Código: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <div class="container">
            <!-- Brand -->
            <a class="navbar-brand" href="/">SGE</a>

            <!-- Toggler/collapsibe Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="/">Inicio</a></li>
                    <li class="nav-item"><a class="nav-link" href="/Home/About">Acerca de</a></li>
                    <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contacto</a></li>
                </ul>
                <ul class="navbar-nav navbar-right">
                    <li class="nav-item"><a class="nav-link" href="/Identity/Account/Register" id="registerLink">Registrar</a></li>
                    <li class="nav-item"><a class="nav-link" href="/Identity/Account/Login" id="loginLink">Iniciar sesión</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
Como podrán comprobar se obtiene el siguiente aspecto:

Y lo que deseo es que los links de registro y login se ubiquen al lado derecho del contenedor, algo asì:


Por favor si me echan una mano, gracias.
  #2 (permalink)  
Antiguo 13/02/2018, 23:15
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Problema con Navbar (Bootstrap 4)
Ese layout solo funciona en bootstrap 3

Si quieres seguir usándolo tendrá que ajustarlo manualmente en tus hojas de estilo o regresarte a la version 3
  #3 (permalink)  
Antiguo 14/02/2018, 15:28
Avatar de DragonX
Colaborador
  
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años, 5 meses
Puntos: 177
Respuesta: Problema con Navbar (Bootstrap 4)
Tu codigo es el correcto, es Bootstrap 4 el tema es que te faltan algunas cosas, compara tu codigo con el siguiente:

Código HTML: 
Ver original
  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar w/ text</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  6.   <div class="collapse navbar-collapse" id="navbarText">
  7.     <ul class="navbar-nav mr-auto">
  8.       <li class="nav-item active">
  9.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  10.       </li>
  11.       <li class="nav-item">
  12.         <a class="nav-link" href="#">Features</a>
  13.       </li>
  14.       <li class="nav-item">
  15.         <a class="nav-link" href="#">Pricing</a>
  16.       </li>
  17.     </ul>
  18.     <span class="navbar-text">
  19.       Navbar text with an inline element
  20.     </span>
  21.   </div>
  22. </nav>

Por ejemplo a tu
Código HTML: 
Ver original
  1. <ul class="navbar-nav">
le falta el class 'mr-auto'

y en tu otro <ul>
Código HTML: 
Ver original
  1. <ul class="navbar-nav navbar-right">
borrale el class 'navbar-right' y probalo.

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #4 (permalink)  
Antiguo 17/02/2018, 09:10
 
Fecha de Ingreso: octubre-2014
Ubicación: Lima
Mensajes: 74
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Problema con Navbar (Bootstrap 4)
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: 
Ver original
  1. <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  2.         
  3.         <!-- Brand -->
  4.         <a class="navbar-brand" href="#">Sistema</a>
  5.             
  6.         <!-- Toggler/collapsibe Button -->
  7.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  8.             <span class="navbar-toggler-icon"></span>
  9.         </button>
  10.  
  11.         <!-- Navbar -->
  12.         <div class="collapse navbar-collapse" id="collapsibleNavbar">
  13.             
  14.             <!-- links -->
  15.             <ul class="navbar-nav mr-auto">
  16.                 <li class="nav-item active">
  17.                     <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
  18.                 </li>
  19.                 <li class="nav-item">
  20.                     <a class="nav-link" href="#">Acerca de</a>
  21.                 </li>
  22.                 <li class="nav-item">
  23.                     <a class="nav-link" href="#">Contacto</a>
  24.                 </li>
  25.             </ul>
  26.  
  27.             <!-- Register & Login -->
  28.             <ul class="navbar-nav">
  29.                 <li class="nav-item">
  30.                     <a href="#" class="nav-link">Registrar</a>
  31.                 </li>
  32.                 <li class="nav-item">
  33.                     <a href="#" class="nav-link">Iniciar sesión</a>
  34.                 </li>
  35.             </ul>
  36.         </div>
  37.     </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: 
Ver original
  1. <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  2.         
  3.         <!-- Brand -->
  4.         <a class="navbar-brand" href="#">Sistema</a>
  5.             
  6.         <!-- Toggler/collapsibe Button -->
  7.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  8.             <span class="navbar-toggler-icon"></span>
  9.         </button>
  10.  
  11.         <!-- Navbar -->
  12.         <div class="collapse navbar-collapse" id="collapsibleNavbar">
  13.             
  14.             <!-- links -->
  15.             <ul class="navbar-nav mr-auto">
  16.                 <li class="nav-item active">
  17.                     <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
  18.                 </li>
  19.                 <li class="nav-item">
  20.                     <a class="nav-link" href="#">Acerca de</a>
  21.                 </li>
  22.                 <li class="nav-item">
  23.                     <a class="nav-link" href="#">Contacto</a>
  24.                 </li>
  25.             </ul>
  26.  
  27.             <!-- Hello & Logout -->
  28.             <form action="/Account/LogOff" method="POST" id="logoutForm">
  29.                 <ul class="navbar navbar-nav">
  30.                     <li class="nav-item">
  31.                         <a class="nav-link" href="#">Hola Pedro!</a>
  32.                     </li>
  33.                     <li class="nav-item">
  34.                         <a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Cerrar sesión</a>
  35.                     </li>
  36.                 </ul>
  37.             </form>
  38.         </div>
  39.     </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: 
Ver original
  1. <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  2.         
  3.         <!-- Brand -->
  4.         <a class="navbar-brand" href="#">Sistema</a>
  5.             
  6.         <!-- Toggler/collapsibe Button -->
  7.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  8.             <span class="navbar-toggler-icon"></span>
  9.         </button>
  10.  
  11.         <!-- Navbar -->
  12.         <div class="collapse navbar-collapse" id="collapsibleNavbar">
  13.             
  14.             <!-- links -->
  15.             <ul class="navbar-nav mr-auto">
  16.                 <li class="nav-item active">
  17.                     <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
  18.                 </li>
  19.                 <li class="nav-item">
  20.                     <a class="nav-link" href="#">Acerca de</a>
  21.                 </li>
  22.                 <li class="nav-item">
  23.                     <a class="nav-link" href="#">Contacto</a>
  24.                 </li>
  25.             </ul>
  26.  
  27.             <!-- Hello & Logout -->
  28.             <ul class="navbar-nav">
  29.                 <li class="nav-item">
  30.                     <a class="nav-link" href="#">Hola Pedro!</a>
  31.                 </li>
  32.                 <li class="nav-item">
  33.                     <form action="/Account/LogOff" method="POST" id="logoutForm">
  34.                         <a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Cerrar sesión</a>
  35.                     </form>
  36.                 </li>
  37.             </ul>
  38.         </div>
  39.     </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.
Última edición por eduar2083; 17/02/2018 a las 09:45

Etiquetas: bootstrap, navbar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:16.