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.

Na tejto stránke

Hlavy hore! Predtým, ako sa ponoríte do toho, ako upraviť a prispôsobiť stĺpce mriežky , si najskôr prečítajte stránku Mriežka .

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

Jeden z troch stĺpcov

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>

Jeden z troch stĺpcov

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>

Horizontálne zarovnanie

Jeden z dvoch stĺpcov

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>

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.

.col-9

.col-4
Keďže 9 + 4 = 13 > 12, tento 4-stĺpcový div sa zabalí do nového riadku ako jedna súvislá jednotka.

.col-6
Nasledujúce stĺpce pokračujú pozdĺž nového riadku.

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>

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 .rows, ale nie každá metóda implementácie to môže zodpovedať.

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

Túto prestávku môžete použiť aj v konkrétnych bodoch prerušenia pomocou našich pomôcok pre citlivé zobrazenie .

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

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ť orderbod prerušenia (napr. .order-1.order-md-2). Zahŕňa podporu pre 1cez 5všetkých šesť úrovní mriežky.

Najprv v DOM, neuplatnila sa žiadna objednávka

Druhý v DOM, s väčšou objednávkou

Tretí v DOM s poradím 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>

Existujú aj responzívne .order-firsta .order-lasttriedy, ktoré menia orderelement použitím order: -1a order: 6, resp. Tieto triedy môžu byť .order-*podľa potreby tiež zmiešané s očíslovanými triedami.

Prvý v DOM, objednaný posledný

Druhý v DOM, bez poradia

Tretie v DOM, objednané ako prvé

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>

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-4prejde .col-md-4cez štyri stĺpce.

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

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 .

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

Okrajové nástroje

S prechodom na flexbox vo verzii 4 môžete použiť pomocné nástroje okrajov, ako napríklad .me-autovynútenie súrodeneckých stĺpcov od seba.

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

Samostatné triedy stĺpcov

Triedy .col-*možno použiť aj mimo a .rowna pridelenie prvku špecifickej šírky. Vždy, keď sa triedy stĺpcov použijú ako nepriame potomkovia riadka, výplne sa vynechajú.

.col-3: šírka 25 %

.col-sm-9: šírka 75 % nad bodom zlomu 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>

Triedy možno použiť spolu s pomôckami na vytváranie responzívnych plávajúcich obrázkov. .clearfixAk 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.

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>