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 /
  • Bootstrap 5 – Sistema de cuadrícula – Cómo dividir una página verticalmente (2 filas verticales independientes, columnas o contenedores)

Bootstrap 5 – Sistema de cuadrícula – Cómo dividir una página verticalmente (2 filas verticales independientes, columnas o contenedores)

23 Jul, 2023 Programación

Estoy tratando de crear un sistema de cuadrícula que divida la página en 2 columnas o 2 filas independientes entre sí, lo que significa que la sección del lado derecho de la página no se expanda para igualar la sección del lado izquierdo de la página.

Entiendo que puedo crear la siguiente cuadrícula con el código a continuación…

Pero de esta manera, las columnas siempre expandirán su altura al 100% para igualar la columna más alta en su fila.

Fila 1 Col 1
Fila 1 Col 2

Fila 2 Col 1
Fila 2 Col 2

Necesito un diseño algo así…

He intentado usar 2 columnas “col-6”, pero todas las formas que he probado resultan en columnas apiladas o columnas que estiran su altura para igualar las columnas adyacentes.

También intenté usar 2 columnas y también 2 filas, limitando su ancho al 50%, pero esto resultó en filas apiladas (obviamente) o columnas apiladas/ajustadas en altura.

Espero tener una página donde pueda mostrar tablas de estadísticas para una cosa en el lado izquierdo de la página, y estadísticas para otra cosa en el lado derecho de la página.

Las tablas no serán de igual altura y no quiero que el lado opuesto de la página iguale sus alturas.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el diseño deseado, puedes utilizar filas y columnas anidadas.

    <div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-12">
          Fila 1 de la columna izquierda
        </div>
        <div class="col-lg-12">
          Fila 2 de la columna izquierda
        </div>
        <div class="col-lg-12">
          Fila 3 de la columna izquierda
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-12">
          Fila 1 de la columna derecha
        </div>
        <div class="col-lg-12">
          Fila 2 de la columna derecha
        </div>
      </div>
    </div>
  </div>
</div>

    Esto crea dos columnas, ambas con filas anidadas. Cada fila dentro de las columnas es independiente de las demás y no se extenderá para coincidir con las filas adyacentes. Puedes ajustar el contenido dentro de cada columna según sea necesario.

Comments are closed.