Columnes
Apreneu a modificar columnes amb un grapat d'opcions d'alineació, ordenació i compensació gràcies al nostre sistema de quadrícula flexbox. A més, vegeu com utilitzar les classes de columnes per gestionar l'amplada dels elements que no són de quadrícula.
Com funcionen
-
Les columnes es basen en l'arquitectura flexbox de la graella. Flexbox significa que tenim opcions per canviar columnes individuals i modificar grups de columnes a nivell de fila . Tu tries com creixen, es redueixen o com canvien les columnes.
-
En crear dissenys de quadrícula, tot el contingut va en columnes. La jerarquia de la graella de Bootstrap va d'un contenidor a una fila a una columna al vostre contingut. En rares ocasions, podeu combinar contingut i columna, però tingueu en compte que hi pot haver conseqüències no desitjades.
-
Bootstrap inclou classes predefinides per crear dissenys ràpids i sensibles. Amb sis punts d'interrupció i una dotzena de columnes a cada nivell de quadrícula, ja tenim desenes de classes creades perquè creïu els vostres dissenys desitjats. Això es pot desactivar mitjançant Sass si ho desitja.
Alineació
Utilitzeu les utilitats d'alineació de flexbox per alinear columnes verticalment i horitzontalment.
Alineació vertical
<div class="container text-center">
<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 text-center">
<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>
Alineació horitzontal
<div class="container text-center">
<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>
Embolcall de la columna
Si es col·loquen més de 12 columnes dins d'una sola fila, cada grup de columnes addicionals, com una unitat, s'ajustarà a una línia nova.
Com que 9 + 4 = 13 > 12, aquest div de 4 columnes s'embolica en una línia nova com una unitat contigua.
Les columnes posteriors continuen per la nova línia.
<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>
Salts de columna
Trencar columnes a una línia nova a flexbox requereix un petit truc: afegiu un element width: 100%
on vulgueu embolicar les vostres columnes a una línia nova. Normalment això s'aconsegueix amb múltiples .row
s, però no tots els mètodes d'implementació poden tenir en compte això.
<div class="container text-center">
<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>
També podeu aplicar aquesta interrupció en punts d'interrupció específics amb les nostres utilitats de visualització sensibles .
<div class="container text-center">
<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ó
Ordena classes
Utilitzeu .order-
classes per controlar l' ordre visual del vostre contingut. Aquestes classes són sensibles, de manera que podeu establir el order
punt d'interrupció per (p. ex., .order-1.order-md-2
). Inclou suport per 1
a través 5
dels sis nivells de quadrícula.
<div class="container text-center">
<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>
També hi ha classes responsive .order-first
i que canvien el d'un element aplicant i , respectivament. Aquestes classes també es poden barrejar amb les classes numerades segons sigui necessari..order-last
order
order: -1
order: 6
.order-*
<div class="container text-center">
<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>
Columnes de compensació
Podeu compensar les columnes de la quadrícula de dues maneres: les nostres .offset-
classes de quadrícula sensibles i les nostres utilitats de marge . Les classes de quadrícula tenen la mida per coincidir amb les columnes, mentre que els marges són més útils per a dissenys ràpids on l'amplada del desplaçament és variable.
Classes offset
Mou les columnes cap a la dreta amb .offset-md-*
classes. Aquestes classes augmenten el marge esquerre d'una columna per *
columnes. Per exemple, .offset-md-4
es mou .col-md-4
sobre quatre columnes.
<div class="container text-center">
<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>
A més d'esborrar columnes als punts d'interrupció sensibles, és possible que hàgiu de restablir els desplaçaments. Vegeu això en acció a l'exemple de quadrícula .
<div class="container text-center">
<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>
Utilitats de marge
Amb el pas a flexbox a la v4, podeu utilitzar utilitats de marge com .me-auto
per forçar les columnes germanes allunyades les unes de les altres.
<div class="container text-center">
<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>
Classes de columnes autònomes
Les .col-*
classes també es poden utilitzar fora d'a .row
per donar a un element una amplada específica. Sempre que s'utilitzen classes de columna com a fills no directes d'una fila, s'ometen els farciments.
<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>
Les classes es poden utilitzar juntament amb utilitats per crear imatges flotants responsives. Assegureu-vos d'embolicar el contingut en un .clearfix
embolcall per esborrar el flotant si el text és més curt.
Un paràgraf de text de marcador de posició. L'estem utilitzant aquí per mostrar l'ús de la classe clearfix. Estem afegint algunes frases sense sentit aquí per demostrar com les columnes interaccionen aquí amb la imatge flotant.
Com podeu veure, els paràgrafs s'emboliquen amb gràcia al voltant de la imatge flotant. Ara imagineu-vos com es veuria això amb un contingut real aquí, en lloc d'aquest text avorrit de marcador de posició que continua i continua, però que en realitat no transmet informació tangible. Simplement ocupa espai i realment no s'ha de llegir.
I, tanmateix, aquí tens, encara perseverant en la lectura d'aquest text de marcador de posició, amb l'esperança d'obtenir més informació o algun ou de Pasqua amagat de contingut. Una broma, potser. Malauradament, aquí no hi ha res d'això.
<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>