Columnas

Aprende a modificar columnas cun puñado de opcións de aliñamento, ordenación e compensación grazas ao noso sistema de cuadrícula flexible. Ademais, vexa como usar as clases de columnas para xestionar os anchos dos elementos que non son da cuadrícula.

Nesta páxina

Aviso! Asegúrate de ler primeiro a páxina da grade antes de explorar como modificar e personalizar as columnas da grade.

Como funcionan

As columnas constrúense na arquitectura de caixa flexible da rede. Flexbox significa que temos opcións para cambiar columnas individuais e modificar grupos de columnas a nivel de fila . Ti escolles como crecen, encollen ou cambian as columnas.
Ao crear esquemas de cuadrícula, todo o contido vai en columnas. A xerarquía da grella de Bootstrap vai de contedor en fila en columna ata o teu contido. En raras ocasións, podes combinar contido e columna, pero ten en conta que pode haber consecuencias non desexadas.
Bootstrap inclúe clases predefinidas para crear deseños rápidos e sensibles. Con seis puntos de interrupción e unha ducia de columnas en cada nivel de grade, xa temos decenas de clases creadas para que crees os deseños que desexes. Isto pódese desactivar a través de Sass se o desexa.

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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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="container">
  <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>
</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="container">
  <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>
</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="container">
  <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>
</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 5dos seis niveis de grella.

Primeiro en DOM, non se aplicou ningunha orde

Segundo en DOM, cun pedido maior

Terceiro en DOM, cunha orde de 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </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: 6.order-*

Primeiro en DOM, último pedido

Segundo en DOM, sen ordenar

Terceiro en DOM, primeiro pedido

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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="container">
  <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>
</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="container">
  <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>
</div>

Utilidades de marxe

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

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Clases de columnas autónomas

As .col-*clases tamén se poden usar fóra de .rowpara darlle a un elemento un ancho específico. Sempre que se usan clases de columna como fillas non directas dunha fila, omítense os recheos.

.col-3: ancho do 25 %

.col-sm-9: ancho do 75% por riba do punto de ruptura sm

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

As clases pódense usar xunto con utilidades para crear imaxes flotantes sensibles. Asegúrate de envolver o contido nun .clearfixenvoltorio para borrar o flotante se o texto é máis curto.

Un parágrafo de texto de marcador de posición. Usémolo aquí para mostrar o uso da clase clearfix. Engadimos aquí algunhas frases sen sentido para demostrar como interactúan as columnas coa imaxe flotante.

Como podes ver, os parágrafos envolven con gracia a imaxe flotante. Agora imaxina como se vería isto con algún contido real aquí, en lugar de só este aburrido texto de marcador de posición que segue e segue, pero que en realidade non transmite información tanxible. Simplemente ocupa espazo e realmente non se debe ler.

E aínda así, aquí tes, aínda perseverante na lectura deste texto de marcador de posición, esperando máis información ou algún ovo de Pascua oculto de contido. Unha broma, quizais. Desafortunadamente, aquí non hai nada diso.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>