Significado de los números en «col-md-4», «col-xs-1», «col-lg-2» en Bootstrap

El sistema de cuadrícula en Bootstrap lo ayuda a alinear el texto uno al lado del otro y utiliza una serie de contenedores, filas y columnas. El sistema de cuadrícula en Bootstrap usa ems y rems para definir la mayoría de los tamaños, mientras que los px se usan para los puntos de interrupción de la cuadrícula y los anchos de los contenedores. Bootstrap Grid System permite hasta 12 columnas en la página. Puede usar cada uno de ellos individualmente o fusionarlos para obtener columnas más anchas. Puede usar todas las combinaciones de valores que suman hasta 12. Puede usar 12 columnas cada una de ancho 1, o usar 4 columnas cada una de ancho 3 o cualquier otra combinación.

grid system

Hay principalmente cinco clases en el sistema de cuadrícula que se enumeran a continuación:

  • .col- Extra pequeño ( < 576 px )
  • .col-sm- Pequeño ( >= 576 px )
  • .col-md- Medio ( >= 768 px )
  • .col-lg- Grande ( >= 992 px )
  • .col-xl- Extra grande ( >= 1200 px )

Bootstrap proporciona 12 columnas por fila que están disponibles en la clase Column. Por lo tanto, puede controlar el ancho de la columna especificando números en .col-*, donde * significa el ancho de la columna en números.

col-md-4: esta clase se usa cuando el tamaño del dispositivo es medio o superior a 768 px y el ancho máximo del contenedor es de 720 px y desea que el ancho sea igual a 4 columnas.

col-xs-1: esta clase se usa cuando el tamaño del dispositivo es extra pequeño (móvil) y cuando desea que el ancho sea igual a 1 columna.

col-lg-2: esta clase se usa cuando el tamaño del dispositivo es grande o superior a 992 px y el ancho máximo del contenedor es de 960 px y cuando desea un tamaño igual a 2 columnas.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bootstrap numbers col-md-4, col-xs-1, col-lg-2
    </title>
      
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
       
    <!-- jQuery library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
       
    <!-- Latest compiled JavaScript -->
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
    </script>
</head>
   
<body>
    <div class="container">
        <div class=" row bg-primary col-lg-2">col-lg-2</div>
        <div class=" row bg-success col-xs-1">col-xs-1</div>
        <div class=" row bg-danger col-md-4">col-md-4</div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Yash_Maheshwari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *