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.

En aquesta pàgina

Caps amunt! Assegureu-vos de llegir primer la pàgina de la quadrícula abans d'aprofundir en com modificar i personalitzar les columnes de la 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

Una de les tres columnes

html

<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>

Una de les tres columnes

html

<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

Una de les dues columnes

html

<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.

.col-9

.col-4
Com que 9 + 4 = 13 > 12, aquest div de 4 columnes s'embolica en una línia nova com una unitat contigua.

.col-6
Les columnes posteriors continuen per la nova línia.

html

<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>

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 .rows, però no tots els mètodes d'implementació poden tenir en compte això.

.col-6 .col-sm-3

html

<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 .

.col-6 .col-sm-4

html

<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 orderpunt d'interrupció per (p. ex., .order-1.order-md-2). Inclou suport per 1a través 5dels sis nivells de quadrícula.

Primer a DOM, no s'ha aplicat cap ordre

Segon al DOM, amb una comanda més gran

Tercer al DOM, amb un ordre d'1

html

<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-firsti que canvien el d'un element aplicant i , respectivament. Aquestes classes també es poden barrejar amb les classes numerades segons sigui necessari..order-lastorderorder: -1order: 6.order-*

Primer a DOM, últim ordenat

Segon en DOM, no ordenat

Tercer al DOM, encarregat primer

html

<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-4es mou .col-md-4sobre quatre columnes.

.col-md-4

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

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

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

html

<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 .

.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

html

<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-autoper forçar les columnes germanes allunyades les unes de les altres.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

html

<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 .rowper 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.

.col-3: amplada del 25%

.col-sm-9: amplada del 75% per sobre del punt d'interrupció sm

html

<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 .clearfixembolcall 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ò.

html

<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>