Columnas
Aprende a modificar columnas cunha serie de opcións de aliñamento, ordenación e compensación grazas ao noso sistema de cuadrícula flexbox. Ademais, vexa como usar as clases de columnas para xestionar o ancho dos elementos que non son de cuadrícula.
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
<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>
<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
<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.
Dado que 9 + 4 = 13 > 12, este div de 4 columnas engádese nunha nova liña como unha unidade contigua.
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 > 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 .row
s, pero non todos os métodos de implementación poden explicar isto.
<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 .
<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 order
punto de interrupción (por exemplo, .order-1.order-md-2
). Inclúe soporte para 1
a través 5
dos seis niveis de grella.
<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-first
e que cambian o elemento dun elemento aplicando e , respectivamente. Estas clases tamén se poden mesturar coas clases numeradas segundo sexa necesario..order-last
order
order: -1
order: 6
.order-*
<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-4
móvese .col-md-4
sobre catro columnas.
<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 .
<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-auto
para afastar as columnas irmáns unhas das outras.
<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 .row
para 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.
<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 .clearfix
envoltorio 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>