Coloane

Aflați cum să modificați coloanele cu o mână de opțiuni pentru aliniere, ordonare și compensare datorită sistemului nostru de grilă Flexbox. În plus, vedeți cum să utilizați clasele de coloane pentru a gestiona lățimile elementelor non-grilă.

Pe aceasta pagina

Atenție! Asigurați-vă că citiți mai întâi pagina Grilă înainte de a afla cum să modificați și să personalizați coloanele grilei.

Cum funcționează

Coloanele se construiesc pe arhitectura flexbox a rețelei. Flexbox înseamnă că avem opțiuni pentru schimbarea coloanelor individuale și modificarea grupurilor de coloane la nivel de rând . Tu alegi modul în care coloanele cresc, se micșorează sau se schimbă în alt mod.
Atunci când construiți modele de grilă, tot conținutul este în coloane. Ierarhia grilei Bootstrap merge de la container la rând la coloană la conținutul tău. În rare ocazii, puteți combina conținut și coloană, dar rețineți că pot exista consecințe nedorite.
Bootstrap include clase predefinite pentru a crea machete rapide și receptive. Cu șase puncte de întrerupere și o duzină de coloane la fiecare nivel al grilei, avem zeci de clase deja construite pentru ca dvs. să creați machetele dorite. Acest lucru poate fi dezactivat prin Sass dacă doriți.

Aliniere

Utilizați utilitarele de aliniere flexbox pentru a alinia vertical și orizontal coloanele.

Aliniere verticală

Una din cele trei coloane

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 din cele trei coloane

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>

Aliniere orizontala

Una din cele două coloane

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>

Înfășurarea coloanei

Dacă mai mult de 12 coloane sunt plasate într-un singur rând, fiecare grup de coloane suplimentare se va încheia, ca o singură unitate, pe o nouă linie.

.col-9

.col-4
Deoarece 9 + 4 = 13 > 12, această div pe 4 coloane este înfășurată pe o nouă linie ca o unitate contigue.

.col-6
Coloanele ulterioare continuă de-a lungul noii linii.

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>

Rupe de coloană

Spărgerea coloanelor într-o nouă linie în flexbox necesită un mic hack: adăugați un element cu width: 100%oriunde doriți să înfășurați coloanele la o nouă linie. În mod normal, acest lucru se realizează cu mai multe .rows, dar nu orice metodă de implementare poate explica acest lucru.

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

De asemenea, puteți aplica această pauză la anumite puncte de întrerupere cu utilitatile noastre de afișare receptive .

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

Reordonare

Comanda cursuri

Utilizați .order-clase pentru a controla ordinea vizuală a conținutului dvs. Aceste clase sunt receptive, așa că puteți seta punctul orderde întrerupere (de exemplu, .order-1.order-md-2). Include suport pentru 1toate 5cele șase niveluri de grilă.

Mai întâi în DOM, nu sa aplicat nicio comandă

Al doilea în DOM, cu o comandă mai mare

Al treilea în DOM, cu un ordin de 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>

Există, de asemenea , clase responsive .order-firstși care schimbă caracterul unui element prin aplicarea și , respectiv. Aceste clase pot fi, de asemenea, amestecate cu clasele numerotate după cum este necesar..order-lastorderorder: -1order: 6.order-*

Primul în DOM, ultimul comandat

Al doilea în DOM, neordonat

Al treilea în DOM, comandat primul

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>

Coloane compensate

Puteți compensa coloanele de grilă în două moduri: .offset-clasele noastre de grilă receptive și utilitățile noastre de marjă . Clasele de gril�� sunt dimensionate pentru a se potrivi coloanelor, în timp ce marginile sunt mai utile pentru layout-uri rapide în care lățimea decalajului este variabilă.

Clasele offset

Mutați coloanele la dreapta folosind .offset-md-*clase. Aceste clase măresc marginea stângă a unei coloane cu *coloane. De exemplu, .offset-md-4se deplasează .col-md-4pe patru coloane.

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

Pe lângă ștergerea coloanelor la punctele de întrerupere receptive, poate fi necesar să resetați decalajele. Vedeți acest lucru în acțiune în exemplul de grilă .

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

Utilități de marjă

Odată cu trecerea la flexbox în v4, puteți utiliza utilități de marjă, cum ar fi .me-autosă forțați coloanele frate la distanță una de alta.

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

Clase de coloane independente

Clasele .col-*pot fi folosite și în afara .rowunui element pentru a da unui element o lățime specifică. Ori de câte ori clasele de coloane sunt folosite ca copii nedirecti ai unui rând, completările sunt omise.

.col-3: latime de 25%

.col-sm-9: lățimea de 75% peste punctul de întrerupere 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>

Clasele pot fi folosite împreună cu utilitare pentru a crea imagini plutitoare receptive. Asigurați-vă că înfășurați conținutul într-un .clearfixînveliș pentru a șterge float-ul dacă textul este mai scurt.

Un paragraf de text substituent. Îl folosim aici pentru a arăta utilizarea clasei clearfix. Adăugăm aici câteva fraze fără sens pentru a demonstra modul în care coloanele interacționează aici cu imaginea plutitoare.

După cum puteți vedea, paragrafele se înfășoară cu grație în jurul imaginii plutitoare. Acum imaginați-vă cum ar arăta acest lucru cu un conținut real aici, mai degrabă decât acest text de substituent plictisitor care continuă și continuă, dar de fapt nu transmite nicio informație tangibilă. Pur și simplu ocupă spațiu și nu ar trebui să fie citit.

Și totuși, aici sunteți, încă perseverând în a citi acest text substituent, sperând să obțineți mai multe informații sau un conținut ascuns. O glumă, poate. Din păcate, nu există nimic din toate astea aici.

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>