Bootstrap Ejemplo de cuadrícula: pequeños dispositivos
Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas que se separaron 25%/75% para pequeños dispositivos.
Consejo: Pequeños dispositivos se definen por tener un ancho de pantalla de 768 píxeles a 991 píxeles.
Para dispositivos pequeños usaremos los .col-sm-* clases.
Vamos a añadir las siguientes clases para nuestros dos columnas:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Ahora Bootstrap va a decir "por el pequeño tamaño, busque clases con -sm- en ellos y utilizar los".
En el siguiente ejemplo se traducirá en un 25%/75% dividida en dispositivos pequeños (y medianas y grandes). En los dispositivos adicionales pequeños, se apilan automáticamente (100%):
Ejemplo
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Inténtalo tú mismo " Nota: Asegúrese de que la suma siempre se suma a 12.
Para un / 66,6% 33,3% dividida, se usaría .col-sm-4 y .col-sm-8 :
Ejemplo
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Inténtalo tú mismo " El siguiente capítulo se muestra cómo agregar un porcentaje de división diferente para dispositivos medianas.