Stĺpce
Naučte sa, ako upravovať stĺpce s niekoľkými možnosťami zarovnania, zoradenia a odsadenia vďaka nášmu mriežkovému systému flexbox. Okrem toho si pozrite, ako používať triedy stĺpcov na správu šírok prvkov, ktoré nie sú mriežkou.
Ako fungujú
-
Stĺpce stavajú na architektúre flexbox mriežky. Flexbox znamená, že máme možnosti na zmenu jednotlivých stĺpcov a úpravu skupín stĺpcov na úrovni riadkov . Môžete si vybrať, ako stĺpce rastú, zmenšujú alebo inak menia.
-
Pri vytváraní rozložení mriežky sa všetok obsah presunie do stĺpcov. Hierarchia mriežky Bootstrapu prechádza od kontajnera k riadku k stĺpcu k vášmu obsahu. V zriedkavých prípadoch môžete skombinovať obsah a stĺpec, ale uvedomte si, že to môže mať neúmyselné následky.
-
Bootstrap obsahuje preddefinované triedy na vytváranie rýchlych a citlivých rozložení. So šiestimi bodmi prerušenia a tuctom stĺpcov na každej vrstve mriežky máme pre vás už vytvorené desiatky tried na vytvorenie požadovaných rozložení. Ak si to želáte, môžete to vypnúť cez Sass.
Zarovnanie
Na vertikálne a horizontálne zarovnanie stĺpcov použite nástroje na zarovnanie flexboxu.
Vertikálne zarovnanie
<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>
<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>
Horizontálne zarovnanie
<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>
Obalenie stĺpcov
Ak je v jednom riadku umiestnených viac ako 12 stĺpcov, každá skupina ďalších stĺpcov sa ako jedna jednotka zalomí do nového riadku.
Keďže 9 + 4 = 13 > 12, tento 4-stĺpcový div sa zabalí do nového riadku ako jedna súvislá jednotka.
Nasledujúce stĺpce pokračujú pozdĺž nového riadku.
<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>
Stĺpec sa zlomí
Rozdelenie stĺpcov na nový riadok vo flexboxe vyžaduje malý hack: pridajte prvok s width: 100%
kdekoľvek chcete zalomiť stĺpce do nového riadku. Normálne sa to dosiahne pomocou viacerých .row
s, ale nie každá metóda implementácie to môže zodpovedať.
<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>
Túto prestávku môžete použiť aj v konkrétnych bodoch prerušenia pomocou našich pomôcok pre citlivé zobrazenie .
<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>
Zmena poradia
Objednať triedy
Použite .order-
triedy na ovládanie vizuálneho poradia vášho obsahu. Tieto triedy sú responzívne, takže môžete nastaviť order
bod prerušenia (napr. .order-1.order-md-2
). Zahŕňa podporu pre 1
cez 5
všetkých šesť úrovní mriežky.
<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>
Existujú aj responzívne .order-first
a .order-last
triedy, ktoré menia order
element použitím order: -1
a order: 6
, resp. Tieto triedy môžu byť .order-*
podľa potreby tiež zmiešané s očíslovanými triedami.
<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>
Odsadenie stĺpcov
Stĺpce mriežky môžete odsadiť dvoma spôsobmi: našimi responzívnymi .offset-
triedami mriežky a našimi nástrojmi na vytváranie okrajov . Triedy mriežky majú veľkosť tak, aby zodpovedali stĺpcom, zatiaľ čo okraje sú užitočnejšie pre rýchle rozloženia, kde je šírka odsadenia premenlivá.
Offsetové triedy
Presuňte stĺpce doprava pomocou .offset-md-*
tried. Tieto triedy zväčšujú ľavý okraj stĺpca o *
stĺpce. Napríklad .offset-md-4
prejde .col-md-4
cez štyri stĺpce.
<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>
Okrem vymazania stĺpcov pri responzívnych prerušovacích bodoch možno budete musieť vynulovať posuny. Pozrite si to v akcii v príklade mriežky .
<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>
Okrajové nástroje
S prechodom na flexbox vo verzii 4 môžete použiť pomocné nástroje okrajov, ako napríklad .me-auto
vynútenie súrodeneckých stĺpcov od seba.
<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>
Samostatné triedy stĺpcov
Triedy .col-*
možno použiť aj mimo a .row
na pridelenie prvku špecifickej šírky. Kedykoľvek sa triedy stĺpcov použijú ako nepriame potomkovia riadka, výplne sa vynechajú.
<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>
Triedy možno použiť spolu s pomôckami na vytváranie responzívnych plávajúcich obrázkov. .clearfix
Ak je text kratší , nezabudnite zabaliť obsah do obalu, aby sa vyčistil plavák.
Odsek zástupného textu. Používame ho tu, aby sme ukázali použitie triedy clearfix. Pridávame tu niekoľko nezmyselných fráz, aby sme demonštrovali, ako tu stĺpce interagujú s plávajúcim obrázkom.
Ako môžete vidieť, odseky sa elegantne obtáčajú okolo vznášajúceho sa obrázku. Teraz si predstavte, ako by to vyzeralo s nejakým skutočným obsahom tu, nie len s týmto nudným zástupným textom, ktorý pokračuje ďalej a ďalej, ale v skutočnosti neposkytuje žiadne hmatateľné informácie. Jednoducho to zaberá miesto a naozaj by sa to nemalo čítať.
A predsa ste tu, stále vytrvalo čítate tento zástupný text a dúfate v nejaké ďalšie poznatky alebo nejaké skryté easter egg obsahu. Možno vtip. Žiaľ, nič z toho tu nie je.
<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>