Stupci

Naučite kako modificirati stupce s pregršt opcija za poravnanje, redoslijed i pomak zahvaljujući našem sustavu mreže flexbox. Osim toga, pogledajte kako koristiti klase stupaca za upravljanje širinama elemenata koji nisu rešetkasti.

Na ovoj stranici

Glavu gore! Obavezno prvo pročitajte stranicu rešetke prije nego što počnete razmišljati o tome kako izmijeniti i prilagoditi svoje stupce mreže.

Kako rade

Stupci se grade na mrežnoj flexbox arhitekturi. Flexbox znači da imamo opcije za mijenjanje pojedinačnih stupaca i modificiranje grupa stupaca na razini retka . Vi birate kako će se stupci povećavati, smanjivati ili na drugi način mijenjati.
Prilikom izrade mrežnih izgleda, sav sadržaj ide u stupce. Hijerarhija Bootstrapove rešetke ide od spremnika preko retka do stupca do vašeg sadržaja. U rijetkim slučajevima možete kombinirati sadržaj i kolumnu, ali imajte na umu da može doći do neželjenih posljedica.
Bootstrap uključuje unaprijed definirane klase za stvaranje brzih, responzivnih izgleda. Sa šest prijelomnih točaka i desetak stupaca na svakoj razini rešetke, imamo desetke klasa koje su već izgrađene za vas da kreirate željene izglede. Ovo se može onemogućiti putem Sassa ako želite.

Poravnanje

Upotrijebite pomoćne programe za poravnanje flexbox za okomito i vodoravno poravnavanje stupaca.

Okomito poravnanje

Jedan od tri stupca

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

Jedan od tri stupca

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

Horizontalno poravnanje

Jedan od dva stupca

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

Omatanje stupaca

Ako je više od 12 stupaca postavljeno unutar jednog retka, svaka grupa dodatnih stupaca će se, kao jedna cjelina, prebaciti u novi redak.

.col-9

.col-4
Budući da je 9 + 4 = 13 > 12, ovaj div sa širinom od 4 stupca premotava se u novi redak kao jedna susjedna jedinica.

.col-6
Sljedeći stupci nastavljaju duž novog retka.

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

Lomovi stupaca

Razbijanje stupaca u novi redak u flexboxu zahtijeva mali hack: dodajte element width: 100%gdje god želite prelomiti svoje stupce u novi redak. Obično se to postiže s više .rows, ali ne može svaka metoda implementacije to objasniti.

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

Ovaj prekid također možete primijeniti na određenim prijelomnim točkama s našim uslužnim programima za responzivni prikaz .

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

Preuređivanje

Red klase

Koristite .order-klase za kontrolu vizualnog poretka vašeg sadržaja. Ove su klase responzivne, tako da možete postaviti ordertočku prekida (npr. .order-1.order-md-2). Uključuje podršku za 1kroz 5svih šest razina mreže.

Prvo u DOM-u, nije primijenjen redoslijed

Drugi u DOM-u, s većom narudžbom

Treći u DOM-u, s redoslijedom 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>

Također postoje responsive .order-firsti .order-lastklase koje mijenjaju orderelement primjenom order: -1i order: 6, respektivno. Ove se klase također mogu po potrebi miješati s numeriranim .order-*klasama.

Prva u DOMU, zadnja naručena

Drugi u DOM-u, bez reda

Treći u DOMU, prvi naručen

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

Odstupanje stupaca

Stupce rešetke možete pomaknuti na dva načina: našim responzivnim .offset-klasama rešetke i našim alatima za margine . Klase mreže veličine su tako da odgovaraju stupcima, dok su margine korisnije za brze rasporede gdje je širina pomaka varijabilna.

Offset klase

Pomaknite stupce udesno koristeći .offset-md-*klase. Ove klase povećavaju lijevu marginu stupca po *stupac. Na primjer, .offset-md-4pomiče se .col-md-4preko četiri stupca.

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

Uz brisanje stupaca na responzivnim prijelomnim točkama, možda ćete morati ponovno postaviti pomake. Pogledajte ovo na djelu u primjeru mreže .

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

Marginalne usluge

S prelaskom na flexbox u v4, možete koristiti pomoćne programe za margine kao što .me-autoje prisilno udaljavanje srodnih stupaca jedan od drugog.

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

Samostalne klase stupaca

Klase .col-*se također mogu koristiti izvan a .rowda bi se elementu dala određena širina. Kad god se klase stupaca koriste kao neizravna djeca retka, ispune su izostavljene.

.col-3: širina od 25%

.col-sm-9: širina od 75% iznad sm prijelomne točke

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

Klase se mogu koristiti zajedno s uslužnim programima za stvaranje odgovarajućih plutajućih slika. Obavezno zamotajte sadržaj u .clearfixomot kako biste uklonili float ako je tekst kraći.

Odlomak teksta rezerviranog mjesta. Ovdje ga koristimo da pokažemo korištenje klase clearfix. Ovdje dodajemo dosta besmislenih fraza kako bismo pokazali kako stupci ovdje komuniciraju s lebdećom slikom.

Kao što vidite, odlomci se graciozno omotavaju oko lebdeće slike. Sada zamislite kako bi ovo izgledalo s nekim stvarnim sadržajem ovdje, a ne samo s ovim dosadnim tekstom rezerviranog mjesta koji se nastavlja i nastavlja, ali zapravo ne prenosi nikakve opipljive informacije. Jednostavno zauzima prostor i ne treba ga baš čitati.

Pa ipak, evo vas, još uvijek ustrajete u čitanju ovog rezerviranog teksta, nadajući se još nekim uvidima ili nekom skrivenom uskršnjem jajetu sadržaja. Šala, možda. Nažalost, ovdje toga nema.

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