Bienvenido a la Comunidad de Treehouse
¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.
¿Buscas aprender algo nuevo?
Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de
Inicia tu prueba gratuita
Hiram Levy
3,783 puntos¿Por qué mi barra de navegación no se expande al ancho completo?
Aquí está mi código, he estado siguiendo todas las instrucciones de los videos de Bootstrap:
<!-- Bootstrap CSS -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css integrity=sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M crossorigin=anonymous>
</head>
<body>
<!-- barra de navegación -->
<nav class=navbar navbar-expand-lg navbar-dark bg-primary>
<div class=container>
<a class=navbar-brand order-1 mr-0 href=https://www.teamtreehouse.com target=_blank>Presentado por Treehouse</a>
<botón class=navbar-toggler type=button data-toggle=collapse data-target=#navbarNavAltMarkup aria-controls=navbarNavAltMarkup aria-expanded=falso aria-label=Alternar navegación>
<span class=navbar-toggler-icon></span>
</botón>
<div class=collapse navbar-collapse id=navbarNavAltMarkup>
<div class=navbar-nav>
<a class=nav-item nav-link href=#home>Inicio <span class=sr-only>(actual)</span></a>
<a class=nav-item nav-link href=#about>Acerca de</a>
<a class=nav-item nav-link href=#speakers>Ponentes</a>
<a class=nav-item nav-link href=#schedule>Horario</a>
</div>
</div>
</div>
</nav>
<!-- /barra de navegación -->
<!-- Acerca de -->
<div class=fila>
<div class=col-lg order-lg-2>
<h3 class=mb-4>Acerca de Full Stack Conf</h3>
<img class=mb-4 img-fluid rounded src=img/pdx.jpg alt=Portland>
<p>¡La hermosa ciudad de Portland, Oregón será la ciudad anfitriona de Full Stack Conf!</p>
<p>Explora el futuro de JavaScript con un alineación de profesionales de la industria. Descubre nuevas técnicas para avanzar tu carrera como desarrollador web.</p>
</div>
<div class=col-lg order-lg-1>
<h3 class=mb-4>Oradores expertos</h3>
<p>¡Nuestro alineación de oradores expertos acaba de ser anunciada, así que no esperes demasiado antes de conseguir tus entradas!</p>
<p>¿Quieres conocer la comunidad internacional de JavaScript y compartir habilidades con algunos de los mejores expertos, hackers y creadores del mundo? ¡Sé el primero en saber qué esperar del futuro de JavaScript.</p>
<p>Full Stack Conf se compromete a ser inclusiva y acogedora para todos. Esperamos con entusiasmo otro día intensivo de aprendizaje y intercambio.</p>
</div>
<div class=col-lg order-lg-3>
<h3 class=mb-4>Lo Que Aprenderás</h3>
<ul>
<li><strong>MongoDB</strong>: base de datos NoSQL</li>
<li><strong>Express</strong>: Marco de trabajo para Node</li>
<li><strong>React</strong>: biblioteca de JavaScript</li>
<li><strong>Node.js</strong>: entorno de JavaScript</li>
<li><strong>ES2015</strong>: última versión de JavaScript</li>
<li><strong>Babel</strong>: compilador de JavaScript</li>
</ul>
<!-- oradores -->
<h1 class=display-4 text-center my-5 text-muted>Ponentes</h1>
[Las biografías de los oradores van aquí]
<!-- /speakers -->
<!-- horario -->
<h1 class=display-4 text-center my-5 text-muted>Horario</h1>
[El horario de la conferencia va aquí]
<!-- /horario -->
<!-- formulario de registro -->
<hr>
<div class=row py-4 text-muted>
<div class=col-md col-xl-5>
<p><strong>Acerca de Treehouse</strong></p>
<p>Treehouse brinda educación tecnológica asequible a personas en todas partes para ayudarles a lograr sus sueños y cambiar el mundo.</p>
</div>
<div class=col-md col-xl-5 ml-auto>
<p><strong>Mantente actualizado sobre Full Stack Conf</strong></p>
<div class=input-group>
<input type=text class=form-control placeholder=Correo Electrónico>
<span class=input-group-btn>
<botón class=btn btn-primary type=button>Registrarse</botón>
</span>
</div>
</div>
</div>
<hr>
<!-- /formulario de registro -->
</div><!-- /.container -->
<!-- JavaScript opcional -->
<!-- jQuery primero, luego Popper.js, luego Bootstrap JS -->
<script src=https://code.jquery.com/jquery-3.2.1.slim.min.js integrity=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN crossorigin=anonymous></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js integrity=sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4 crossorigin=anonymous></script>
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js integrity=sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1 crossorigin=anonymous></script>
</body>
2 Respuestas
Travis Alstrand
Revisor de Proyectos TreehouseEsto está sucediendo debido a esta línea
<div class=container pt-4>
actualmente siendo en cantidad <nav> elemento. En el video, Guil tiene esto colocado justo debajo de la etiqueta de cierre </nav> etiqueta. Como puedes ver en el minuto 01:47 del video.
Mover esa etiqueta hacia abajo y debajo de tu elemento de navegación debería resolver tu problema 😃
Hiram Levy
3,783 puntosGracias, eso resolvió el problema :D