iónica de cuadrícula (Grid)

iónica de cuadrícula (Grid) y la mayoría de otros marcos son diferentes, se utiliza un modelo de caja elástica (Flexible Box Model). Y en el terminal móvil, básicamente teléfonos son compatibles. estilo fila fila especificada, estilo col se especifica la columna.

rejilla mismo tamaño

En la fila con los elementos de estilo en el estilo si se incluye la col, col se establecerá en el mismo tamaño.

El siguiente estilo fila contiene ejemplos 5 estilo col, col cada anchura de 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Trate »

Especifica el ancho de una columna

Puede establecer los tamaños de muestra para cada columna en una fila. Por defecto, la columna se divide en igual tamaño. Pero también se puede configurar como un porcentaje de la anchura de la columna (una malla de comportamiento 12).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Trate »

Nota: Los ejemplos de cada estilo se añadirán automáticamente a col borde y un fondo gris.

A continuación se enumeran algunas de la columna especificada nombre de estilo porcentaje anchura:

Hay desplazamiento de cuadrícula

Puede establecer la columna de la izquierda compensado ejemplos son los siguientes:

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Trate »

Aquí están algunas porcentaje compensado nombre del estilo:

Retrato ajustar a la cuadrícula

modelo de caja flexible puede configurar fácilmente la columna alineada longitudinalmente. Consta superior alineada longitudinalmente, parte media de la parte inferior, se puede aplicar a cada fila de la columna, o una columna especificada.

Ejemplo, el último que configurar el contenido de demostración para una mejor alineación longitudinal rejilla.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Trate »

Rejilla sensible

pantalla del dispositivo cuando se cambia, por ejemplo, la pantalla horizontal, vertical de la pantalla y así sucesivamente. Necesitamos establecer la red para cada fila se pueden implementar en función del ancho del tamaño de adaptación.

Los distintos dispositivos de estilo de respuesta de la clase de la siguiente manera:

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Trate »