Source

Sistema de reixa

Usa a nosa poderosa cuadrícula flexible para móbiles para crear deseños de todas as formas e tamaños grazas a un sistema de doce columnas, cinco niveis de resposta predeterminados, variables e mixins Sass e decenas de clases predefinidas.

Cómo funciona

O sistema de cuadrícula de Bootstrap usa unha serie de contedores, filas e columnas para organizar e aliñar o contido. Está construído con flexbox e é totalmente sensible. A continuación móstrase un exemplo e unha ollada en profundidade sobre como se xunta a grella.

Novo ou non está familiarizado con Flexbox? Lea esta guía de flexbox de trucos CSS para coñecer o fondo, a terminoloxía, as directrices e os fragmentos de código.

Unha das tres columnas

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

O exemplo anterior crea tres columnas de igual ancho en dispositivos pequenos, medianos, grandes e extra grandes utilizando as nosas clases de grade predefinidas. Esas columnas están centradas na páxina co pai .container.

Desglosándoo, velaí como funciona:

Os contedores proporcionan un medio para centrar e rellenar horizontalmente o contido do teu sitio. Utilízase .containerpara un ancho de píxel sensible ou .container-fluidpara width: 100%todos os tamaños de visualización e dispositivos.
As filas son envoltorios para columnas. Cada columna ten horizontal padding(chamada cuneta) para controlar o espazo entre elas. Isto paddingcontrarrestarase nas filas con marxes negativas. Deste xeito, todo o contido das túas columnas aliñarase visualmente no lado esquerdo.
Nun deseño de grade, o contido debe colocarse dentro das columnas e só as columnas poden ser fillas inmediatas das filas.
Grazas a flexbox, as columnas de grade sen un especificado widthdisporán automaticamente como columnas de igual ancho. Por exemplo, catro instancias de .col-smcada unha delas terán automaticamente un 25 % de ancho a partir do pequeno punto de interrupción. Consulte a sección de columnas de deseño automático para obter máis exemplos.
As clases de columnas indican o número de columnas que desexa usar das 12 posibles por fila. Entón, se queres tres columnas de igual ancho, podes usar .col-4.
As columnas widthestán establecidas en porcentaxes, polo que sempre son fluídas e dimensionadas en relación ao seu elemento pai.
As columnas teñen horizontais paddingpara crear os canlóns entre columnas individuais, non obstante, pode eliminar as marginfilas e as paddingcolumnas .no-gutterscon .row.
Para que a grade responda, hai cinco puntos de interrupción de grade, un para cada punto de interrupción sensible : todos os puntos de interrupción (extra pequenos), pequenos, medianos, grandes e extra grandes.
Os puntos de interrupción da grella baséanse en consultas de medios de ancho mínimo, o que significa que aplícanse a ese punto de interrupción e a todos os que están por riba del (por exemplo, .col-sm-4aplícase a dispositivos pequenos, medianos, grandes e extra grandes, pero non ao primeiro xspunto de interrupción).
Podes usar clases de cuadrícula predefinidas (como .col-4) ou mixins de Sass para un marcado máis semántico.

Teña en conta as limitacións e erros do flexbox , como a imposibilidade de usar algúns elementos HTML como contedores flexibles .

Opcións de reixa

Mentres Bootstrap usa ems ou rems para definir a maioría dos tamaños, pxs úsanse para puntos de ruptura de grade e anchos de contedores. Isto débese a que o ancho da ventana gráfica está en píxeles e non cambia co tamaño da fonte .

Vexa como funcionan os aspectos do sistema de reixa Bootstrap en varios dispositivos cunha táboa útil.

	Extra pequeno <576px	Pequeno ≥576 píxeles	Media ≥768 píxeles	Grande ≥992px	Extra grande ≥1200px
Ancho máximo do recipiente	Ningún (automático)	540 píxeles	720 píxeles	960 píxeles	1140 píxeles
Prefixo de clase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# de columnas	12
Ancho de canalón	30px (15px a cada lado dunha columna)
Encaixable	Si
Ordenación de columnas	Si

Columnas de deseño automático

Use clases de columnas específicas de puntos de interrupción para facilitar o tamaño das columnas sen unha clase numerada explícita como .col-sm-6.

Igual ancho

Por exemplo, aquí tes dous deseños de grade que se aplican a todos os dispositivos e ventanas gráficas, desde xsata xl. Engade calquera número de clases sen unidades para cada punto de interrupción que necesites e cada columna terá o mesmo ancho.

1 de 2

2 de 2

1 de 3

2 de 3

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

As columnas de igual ancho pódense dividir en varias liñas, pero houbo un erro de caixa flexible de Safari que impediu que isto funcionara sen un ficheiro explícito flex-basisou border. Existen solucións para versións antigas do navegador, pero non deberían ser necesarias se estás actualizado.

Columna

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Configurando o ancho dunha columna

O deseño automático para as columnas de cuadrícula flexbox tamén significa que pode definir o ancho dunha columna e que as columnas irmáns cambien automaticamente o tamaño ao seu redor. Podes usar clases de grade predefinidas (como se mostra a continuación), mesturas de grade ou anchos en liña. Teña en conta que as outras columnas cambiarán de tamaño sen importar o ancho da columna central.

1 de 3

2 de 3 (máis ancho)

3 de 3

1 de 3

2 de 3 (máis ancho)

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contido de ancho variable

Use col-{breakpoint}-autoclases para dimensionar as columnas en función do ancho natural do seu contido.

1 de 3

Contido de ancho variable

3 de 3

1 de 3

Contido de ancho variable

3 de 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Varias filas de igual ancho

Crea columnas de igual ancho que abranguen varias filas introducindo un .w-100lugar onde queres que as columnas rompan nunha nova liña. Fai que as pausas respondan mesturando o .w-100con algunhas utilidades de visualización sensibles .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Clases responsivas

A grella de Bootstrap inclúe cinco niveis de clases predefinidas para crear deseños de resposta complexos. Personaliza o tamaño das túas columnas en dispositivos extra pequenos, pequenos, medianos, grandes ou extra grandes como queiras.

Todos os puntos de interrupción

Para as cuadrículas que son iguais desde o dispositivo máis pequeno ata o máis grande, utiliza as clases .cole . .col-*Especifique unha clase numerada cando necesite unha columna de tamaño especial; en caso contrario, non dubides en seguir .col.

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Apilados en horizontal

Usando un único conxunto de .col-sm-*clases, pode crear un sistema de cuadrícula básico que comeza apilado e se fai horizontal no pequeno punto de interrupción ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mesturar e combinar

Non queres que as túas columnas simplemente se apilen nalgúns niveis de grade? Use unha combinación de diferentes clases para cada nivel segundo sexa necesario. Vexa o seguinte exemplo para ter unha mellor idea de como funciona todo.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Aliñación

Use as utilidades de aliñamento flexbox para aliñar columnas vertical e horizontalmente.

Aliñación vertical

Unha das tres columnas

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Unha das tres columnas

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Aliñación horizontal

Unha das dúas columnas

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Sen cunetas

As cunetas entre columnas nas nosas clases de cuadrícula predefinidas pódense eliminar con .no-gutters. Isto elimina o margins negativo .rowe o horizontal paddingde todas as columnas fillas inmediatas.

Aquí tes o código fonte para crear estes estilos. Teña en conta que as substitucións das columnas só se limitan ás primeiras columnas fillas e están dirixidas a través do selector de atributos . Aínda que isto xera un selector máis específico, o recheo de columnas aínda se pode personalizar aínda máis coas utilidades de espazamento .

Necesitas un deseño de punta a punta? Deixa o pai .containerou .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Na práctica, velaí como se ve. Teña en conta que pode seguir usándoo con todas as outras clases de grade predefinidas (incluíndo o ancho de columna, os niveis de resposta, as reordenacións e moito máis).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Envoltura de columnas

Se se colocan máis de 12 columnas nunha soa fila, cada grupo de columnas adicionais envolverase, como unha unidade, nunha nova liña.

.col-9

.col-4
Dado que 9 + 4 = 13 > 12, este div de 4 columnas engádese nunha nova liña como unha unidade contigua.

.col-6
As columnas posteriores continúan pola nova liña.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Quebras de columna

Romper columnas nunha nova liña en Flexbox require un pequeno truco: engade un elemento width: 100%onde queiras envolver as túas columnas nunha nova liña. Normalmente, isto conséguese con varios .rows, pero non todos os métodos de implementación poden explicar isto.

.col-6 .col-sm-3

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Tamén pode aplicar esta interrupción en puntos de interrupción específicos coas nosas utilidades de visualización sensibles .

.col-6 .col-sm-4

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

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Reordenación

Ordenar clases

Use .order-clases para controlar a orde visual do seu contido. Estas clases son sensibles, polo que podes establecer o orderpunto de interrupción (por exemplo, .order-1.order-md-2). Inclúe soporte para 1a través 12dos cinco niveis de grella.

Primeiro, pero sen ordenar

Segundo, pero último

Terceiro, pero primeiro

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Tamén hai clases responsive .order-firste que cambian o elemento dun elemento aplicando e ( ), respectivamente. Estas clases tamén se poden mesturar coas clases numeradas segundo sexa necesario..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Primeiro, pero último

Segundo, pero desordenado

Terceiro, pero primeiro

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Columnas de compensación

Podes compensar as columnas da grella de dúas formas: as nosas .offset-clases de grella sensibles e as nosas utilidades de marxe . As clases de grade teñen un tamaño para coincidir coas columnas, mentres que as marxes son máis útiles para deseños rápidos onde o ancho do desplazamento é variable.

Clases de compensación

Move as columnas cara á dereita usando .offset-md-*clases. Estas clases aumentan a marxe esquerda dunha columna por *columnas. Por exemplo, .offset-md-4móvese .col-md-4sobre catro columnas.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Ademais de borrar columnas nos puntos de interrupción sensibles, é posible que necesites restablecer as compensacións. Vexa isto en acción no exemplo da grella .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utilidades de marxe

Co paso a flexbox na versión 4, podes usar utilidades de marxe como .mr-autopara afastar as columnas irmáns unhas das outras.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Aniñación

Para aniñar o teu contido coa grade predeterminada, engade unha nova .rowe un conxunto de columnas dentro dunha columna .col-sm-*existente . .col-sm-*As filas anidadas deben incluír un conxunto de columnas que suman ata 12 ou menos (non é necesario que use as 12 columnas dispoñibles).

Nivel 1: .col-sm-9

Nivel 2: .col-8 .col-sm-6

Nivel 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass mixins

Ao usar os ficheiros Sass de orixe de Bootstrap, tes a opción de usar variables e mixins de Sass para crear deseños de páxina personalizados, semánticos e sensibles. As nosas clases de cuadrícula predefinidas usan estas mesmas variables e mixins para proporcionar un conxunto completo de clases listas para usar para deseños de resposta rápida.

Variables

As variables e os mapas determinan o número de columnas, o ancho do canal e o punto de consulta de medios no que comezar as columnas flotantes. Usamos estes para xerar as clases de cuadrícula predefinidas documentadas anteriormente, así como para os mixins personalizados que se indican a continuación.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Os mixins úsanse xunto coas variables da grella para xerar CSS semántico para columnas de grella individuais.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Exemplo de uso

Podes modificar as variables aos teus propios valores personalizados ou simplemente usar os mixins cos seus valores predeterminados. Aquí tes un exemplo de uso da configuración predeterminada para crear un deseño de dúas columnas cun espazo entre eles.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Contido principal

Contido secundario

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalización da grella

Usando as nosas variables e mapas Sass de grade incorporados, é posible personalizar completamente as clases de grade predefinidas. Cambie o número de niveis, as dimensións da consulta de medios e o ancho do contenedor e, a continuación, recompile.

Columnas e canlóns

O número de columnas da grella pódese modificar mediante variables Sass. $grid-columnsutilízase para xerar os anchos (en porcentaxe) de cada columna individual mentres $grid-gutter-widthestablece o ancho para as cunetas das columnas.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Niveles de reixa

Máis alá das propias columnas, tamén podes personalizar o número de niveis de grade. Se queres só catro niveis de grella, actualizarías $grid-breakpointse $container-max-widthsa algo así:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Cando fagas calquera cambio nas variables ou mapas de Sass, terás que gardar os cambios e recompilalos. Ao facelo, sairá un novo conxunto de clases de grade predefinidas para anchos de columnas, desprazamentos e ordes. As utilidades de visibilidade receptivas tamén se actualizarán para usar os puntos de interrupción personalizados. Asegúrate de establecer os valores da grella en px(non rem, emou %).