Kolone

Naučite kako da modifikujete kolone sa pregršt opcija za poravnanje, redosled i pomeranje zahvaljujući našem sistemu flexbox mreže. Osim toga, pogledajte kako koristiti klase stupaca za upravljanje širinama elemenata koji nisu u mreži.

Na ovoj stranici

Glavu gore! Obavezno prvo pročitajte stranicu Grid prije nego što uronite u to kako modificirati i prilagoditi svoje stupce mreže.

Kako rade

Kolone se grade na flexbox arhitekturi mreže. Flexbox znači da imamo opcije za promenu pojedinačnih kolona i modifikovanje grupa kolona na nivou reda . Vi birate kako kolone rastu, smanjuju se ili se na drugi način mijenjaju.
Prilikom izrade rasporeda mreže sav sadržaj ide u kolone. Hijerarhija Bootstrap mreže ide od kontejnera do reda do stupca do vašeg sadržaja. U rijetkim prilikama možete kombinirati sadržaj i kolumnu, ali imajte na umu da može doći do neželjenih posljedica.
Bootstrap uključuje predefinirane klase za kreiranje brzih, prilagodljivih izgleda. Sa šest tačaka prekida i desetak kolona na svakom nivou mreže, imamo desetine klasa koje smo već izgradili za kreiranje željenog rasporeda. Ovo se može onemogućiti putem Sass-a ako želite.

Poravnanje

Koristite uslužne programe za poravnanje flexboxa za vertikalno i horizontalno poravnanje stupaca.

Vertikalno poravnanje

Jedna od tri kolone

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

Jedna od tri kolone

<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

Jedna od dvije kolone

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

Omotavanje kolone

Ako je više od 12 kolona postavljeno unutar jednog reda, svaka grupa dodatnih kolona će se, kao jedna jedinica, premotati u novi red.

.col-9

.col-4
Pošto je 9 + 4 = 13 > 12, ovaj div širine 4 kolone se umotava u novi red kao jedna susedna jedinica.

.col-6
Naredne kolone se nastavljaju duž novog reda.

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

Prelomi kolona

Razbijanje kolona u novi red u flexbox-u zahtijeva mali hak: dodajte element width: 100%gdje god želite da premotate svoje kolone u novi red. Obično se to postiže s višestrukim .rows, ali ne može svaka metoda implementacije to uzeti u obzir.

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

Ovu pauzu možete primijeniti i na određenim prijelomnim tačkama s našim responzivnim uslužnim programima za 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

Naručite časove

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

Prvo u DOM-u, nije primijenjena narudžba

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

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

Postoje i responsive .order-firsti .order-lastklase koje mijenjaju orderelement primjenom order: -1i order: 6, respektivno. Ove klase se takođe mogu mešati sa numerisanim .order-*klasama po potrebi.

Prvi u DOM-u, naručen zadnji

Drugi u DOM-u, neuređen

Treći u DOM-u, naručen prvi

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

Offseting kolone

Možete pomaknuti stupce mreže na dva načina: naše responzivne .offset-mrežne klase i naše margine . Mrežne klase su veličine tako da odgovaraju kolonama, dok su margine korisnije za brze izglede gdje je širina pomaka promjenjiva.

Offset klase

Pomjerite stupce udesno koristeći .offset-md-*klase. Ove klase povećavaju lijevu marginu kolone po *kolone. Na primjer, .offset-md-4kreće se .col-md-4preko četiri kolone.

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

Pored brisanja stupaca na odgovarajućim prijelomnim tačkama, možda ćete morati resetirati 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>

Margin komunalne usluge

Sa prelaskom na flexbox u v4, možete koristiti marginalne uslužne programe kao što .me-autoje prisilno udaljavanje srodničkih 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 nedirektne djece reda, dodaci se izostavljaju.

.col-3: širina od 25%

.col-sm-9: širina od 75% iznad sm tačke prekida

<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 sa uslužnim programima za kreiranje responzivnih plutajućih slika. Obavezno umotajte sadržaj u .clearfixomotač kako biste očistili plutajući ako je tekst kraći.

Odlomak teksta čuvara mjesta. Ovdje ga koristimo da pokažemo upotrebu klase clearfix. Ovdje dodajemo poprilično besmislenih fraza kako bismo demonstrirali kako stupci ovdje stupaju u interakciju s lebdećom slikom.

Kao što možete vidjeti, paragrafi 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 za čuvanje mjesta koji se nastavlja i nastavlja, ali zapravo ne prenosi nikakve opipljive informacije. Jednostavno zauzima prostor i ne bi ga trebalo čitati.

Pa ipak, evo vas, još uvijek ustrajavate 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>