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

CSS Conceptos básicos de Bootstrap Usar Componentes Bootstrap Construyendo una barra de navegación

Publicado por Cool Beans
Cool Beans
6,937 Puntos

Necesito ayuda con el posicionamiento de la barra de navegación

aquí está mi código:

<!DOCTYPE html>

<!-- Bootstrap CSS -->
<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css rel=stylesheet integrity=sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH crossorigin=anonymous>

 <script src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js integrity=sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz crossorigin=anonymous></script>

</head>

<div class=jumbotron text-center>

<h1 class="display-4">Conferencia de Front End</h1>

<p>Utiliza clases de utilidad para tipografía y espaciado para distribuir el contenido dentro del contenedor más grande.</p>

<div class="container">

    <h3 class=mb-4>Oradores expertos</h3>
    <img src=img/pdx.jpg class=mb-4 img-fluid rounded>

<p>¡Nuestro alineado de oradores expertos acaba de ser anunciado, así que no esperes demasiado antes de conseguir tus entradas!</p>
<h1 class="display-4 text-center m-5 text-muted">Oradores</h1>

[descripción aquí]

<h1 class="display-4 text-center m-5 text-muted">Cronograma</h1>

<hr>

<!-- 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>

En este código, "Presentado por Treehouse" se empuja hacia la derecha. <a class="navbar-brand order-1" href="#">Presentado por Treehouse</a>

Sin embargo, cuando hago la pantalla más pequeña, "Presentado por Treehouse" no se mantiene en su posición original. Estoy tratando de resolverlo pero no sé cómo hacerlo, pasé por la documentación de Bootstrap y aún tengo dudas sobre cómo hacer que funcione

1 Respuesta

Cool Beans
Cool Beans
6,937 Puntos
Cool Beans
Cool Beans
6,937 Puntos

Desafortunadamente no puedo cargar capturas de pantalla aquí