es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo conseguir un diseño de tres columnas apiladas simples en Bootstrap 5 que ocupe el 100vh?

¿Cómo puedo conseguir un diseño de tres columnas apiladas simples en Bootstrap 5 que ocupe el 100vh?

17 Jul, 2023 Programación

Hoy comencé a usar Bootstrap 5.

No puedo crear un diseño de tres columnas apiladas (box-1, box-2, y box-3) una encima de la otra tomando el 100vh.

Aquí adjunto una versión redactada del código a continuación, realmente son tres cajas apiladas unas encima de las otras. Puedo lograr esto con CSS Grid y Flexbox, pero no con Bootstrap.

Aquí están los métodos que ya he intentado y no han funcionado:
1) establecer body y html con height: 100vh
2) establecer el contenedor con height: 100vh, esto hace que cada caja ocupe 100vh o que box-1 tome 100vh, box-2 se desborde hasta otros 100vh, y de manera similar con box-3
3) crear una clase wrapper alrededor del contenido de body y establecer ese wrapper con height: 100vh
4) repetir los pasos 1)-3) con la clase de utilidad vh-100.

¿Alguna sugerencia, por favor?

Gracias.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<body>
  <section class="container box-1">
    <div class="row">
      <div class="col">
      </div>
    </div>
  </section>

  <section class="container box-2">
    <div class="row">
      <div class="col">
      </div>
  </div></section>

  <section class="container box-3">
    <div class="row">
      <div class="col">
      </div>
    </div>
  </section>
</body>

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la estructura de tres columnas apiladas con box-1, box-2 y box-3 tome 100vh en Bootstrap 5, puedes intentar los siguientes pasos:

    1. Establece el cuerpo y el html con height: 100% para asegurar que la vista completa esté cubierta: 
      body,
html {
 height: 100%;
}
    2. Utiliza flexbox para apilar las secciones verticalmente configurando el cuerpo con display: flex y dirección de columna: 
      body {
 display: flex;
 flex-direction: column;
}
    3. Establece la altura de cada sección en 100%, para que se apilen uniformemente: 
      .box-1,
.box-2,
.box-3 {
 height: 100%;
}

    Aquí está el código actualizado con los cambios mencionados anteriormente:

    <!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<body>
  <section class="container box-1">
    <div class="row">
      <div class="col"></div>
    </div>
  </section>

  <section class="container box-2">
    <div class="row">
      <div class="col"></div>
    </div>
  </section>

  <section class="container box-3">
    <div class="row">
      <div class="col"></div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-lANHZpBsquI7N1kNPLFEZJ2QYcX9on/3KE0oTBWnCxaJpF6UKMzuCxnlRskn+xJQ" crossorigin="anonymous"></script>
</body>

<style>
  body,
  html {
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  .box-1,
  .box-2,
  .box-3 {
    height: 100%;
  }
</style>

Comments are closed.