1

.contenedor{
    max-width: 1500px;
    width: 80%;
    margin: auto;
}
.menu{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

ul{
    display: flex;
}
    
li{
    list-style: none;
    margin-right: 25px;
    }
   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="Assets/css/index.css">
    <title>Viajes Chile</title>
    
</head>
<body>
    <div class="contenedor">
    <header>
           
    <div class="menu">
            <p>Viajes Chile</p>
            <nav>
<ul>
    <li>Inicio</li>
    <li>Quienes somos</li>
    <li>Destacados</li>
    <li>Contacto</li>
</ul>
            </nav>
        </div>

        <div id="carouselExampleControls" class="carousel slide " data-bs-ride="carousel" >
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="..." class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="Assets/img/carousel1.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="Assets/img/carousel2.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="Assets/img/carousel3.jpg" class="d-block w-100" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
    </header>
        
        <section>

        </section>
        <section>

        </section>
        <section>

        </section>
        <footer>

        </footer>

    </div>
    
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>

Utilizando este codigo necesito que el carrusel de bootstrap se posicione con 0 margen superior , intenté colocar margin 0 , pero no funcionó . Debe ocurrir de tal forma que cubra el menu de navegación, el que tiene que tener letras de color blanco. También los controles del carrusel deben ser de color blanco . Además al cargar la página no aparece de inmediato el carrusel , una imagen de este , sino que aparece una imagen superior en la esquina izquierda pequeña . Aun cuando en el codigo del carrusel se encuentra la instrucción de que debe una de las imagenes estar activa, me imagino que esto es para señalar que al cargar la página aparezca de inmediato esa imagen.

2 respuestas 2

1

Si estás usando Bootstrap, mejor usa entonces un navbar. Entonces el código te quedaría así: El HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="Assets/css/index.css">
    <title>Viajes Chile</title>
    
</head>
<body>
    <div class="contenedor">
    <header>

        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Creativo</a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
           
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" >
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </header>
        
        <section>

        </section>
        <section>

        </section>
        <section>

        </section>
        <footer>

        </footer>

    </div>
    
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>

y el CSS deberías tomar en cuenta esto:

.contenedor{
    max-width: 100vw;
        
    margin: auto;
}
.menu{
    display: flex;
    justify-content: space-between;
   
}

ul{
    display: flex;
}
    
li{
    list-style: none;
    margin-right: 25px;
    }

.carousel-item{
    height: 100vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    background-size: cover;
}
4
  • Gracias por tu respuesta . Lo que necesito sí , es que en el menu de navegación el término VIAJES CHILE esté hacia la izquierda y los otros botones del menu hacia la derecha
    – Pedro
    Commented el 5 jun. 2021 a las 16:35
  • Consulta la documentación de Bootstrap al respecto getbootstrap.com/docs/4.1/components/navbar Commented el 5 jun. 2021 a las 20:17
  • Ok. Buscaré para ver qué encuentro. Gracias por tu ayuda, ha sido muy importante.
    – Pedro
    Commented el 5 jun. 2021 a las 21:20
  • si la respuesta te sirvió, no olvides marcarla como aceptada, así otros usuarios con problemas similares sabrán que puede ser útil para ellos también Commented el 5 jun. 2021 a las 23:29
1

Para colocar un logo a la izquierda y el resto de los botones a la derecha , en bootstrap, se puede usar el siguiente código

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Viajes Chile</a>
      <button class="navbar-toggler" 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>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-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="#">Quienes somos</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Destacados</a>
          </li>
          
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Contacto</a>
          </li>
        </ul>
       
      </div>
    </nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.