Bootstrap cuadrícula Ejemplo: Stacked a horizontal
Vamos a crear un sistema de red básica que comienza apilados en los móviles / tabletas (dispositivos pequeños), antes de convertirse en horizontal en los escritorios (medio / dispositivos grandes).
El siguiente ejemplo muestra un sencillo diseño de dos columnas "apilados a horizontal", lo que significa que se traducirá en una fracción de 50% / 50% en todas las pantallas, excepto para las pequeñas pantallas adicionales, que se apilan automáticamente (100%):
Ejemplo: Stacked a horizontal
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Inténtalo tú mismo " Consejo: Los números en los .col-sm-* clases indica el número de columnas de la div debe abarcar (de un total de 12). Por lo tanto, .col-sm-1 palmos 1 columna, .col-sm-4 palmos 4 columnas, .col-sm-6 vanos 6 columnas, etc.
Nota: Asegúrese de que la suma siempre añade hasta un 12!
Consejo: Usted puede convertir cualquier diseño de ancho fijo en un diseño de ancho completo cambiando el .container clase para .container-fluid :
Ejemplo: El recipiente de fluido
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Inténtalo tú mismo "