Sloupce

Naučte se upravovat sloupce s několika možnostmi zarovnání, řazení a odsazení díky našemu systému flexbox mřížky. Navíc se podívejte, jak používat třídy sloupců ke správě šířek prvků bez mřížky.

Na této straně

Hlavy vzhůru! Než se ponoříte do toho, jak upravit a přizpůsobit sloupce mřížky, přečtěte si nejprve stránku Mřížka .

Jak fungují

Sloupce vycházejí z architektury flexbox mřížky. Flexbox znamená, že máme možnosti pro změnu jednotlivých sloupců a úpravu skupin sloupců na úrovni řádků . Můžete si vybrat, jak sloupce rostou, zmenšují se nebo se jinak mění.
Při vytváření rozvržení mřížky jde veškerý obsah do sloupců. Hierarchie mřížky Bootstrapu jde od kontejneru přes řádek ke sloupci k vašemu obsahu. Ve vzácných případech můžete zkombinovat obsah a sloupec, ale uvědomte si, že to může mít nezamýšlené důsledky.
Bootstrap obsahuje předdefinované třídy pro vytváření rychlých a citlivých rozvržení. Se šesti body přerušení a tuctem sloupců v každé vrstvě mřížky máme pro vás již vytvořeny desítky tříd, abyste si vytvořili požadovaná rozvržení. Pokud si to přejete, můžete to deaktivovat prostřednictvím Sass.

Zarovnání

Pro svislé a vodorovné zarovnání sloupců použijte nástroje pro zarovnání flexboxu.

Vertikální zarovnání

Jeden ze tří sloupců

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

Jeden ze tří sloupců

<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ální zarovnání

Jeden ze dvou sloupců

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

Obtékání sloupů

Pokud je v jednom řádku umístěno více než 12 sloupců, každá skupina nadbytečných sloupců se jako jedna jednotka zalomí do nového řádku.

.col-9

.col-4
Protože 9 + 4 = 13 > 12, tento 4sloupcový div se zabalí do nového řádku jako jedna souvislá jednotka.

.col-6
Následující sloupce pokračují podél nového řádku.

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

Sloupce se zlomí

Rozdělení sloupců na nový řádek ve flexboxu vyžaduje malý hack: přidejte prvek s width: 100%kdekoli, kde chcete zalomit sloupce do nového řádku. Normálně je toho dosaženo s násobkem .rows, ale ne každá metoda implementace to může vysvětlovat.

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

Tuto přestávku můžete také použít v určitých bodech přerušení pomocí našich responzivních zobrazovacích nástrojů .

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

Změna pořadí

Objednat třídy

Použijte .order-třídy pro ovládání vizuálního pořadí vašeho obsahu. Tyto třídy jsou responzivní, takže můžete nastavit orderbod přerušení (např. .order-1.order-md-2). Zahrnuje podporu pro 1přes 5všech šest vrstev mřížky.

Nejprve v DOM, žádná objednávka nebyla použita

Druhý v DOM, s větší objednávkou

Třetí v DOM, s pořadím 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>

Existují také responzivní .order-firsta .order-lasttřídy, které mění orderelement použitím order: -1a order: 6, resp. Tyto třídy lze také podle potřeby kombinovat s číslovanými .order-*třídami.

První v DOM, objednáno jako poslední

Druhý v DOM, neuspořádaný

Třetí v DOM, objednáno jako první

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

Odsazení sloupků

Sloupce mřížky můžete odsadit dvěma způsoby: našimi responzivními .offset-třídami mřížky a našimi nástroji pro okraje . Třídy mřížky mají velikost tak, aby odpovídaly sloupcům, zatímco okraje jsou užitečnější pro rychlé rozvržení, kde je šířka odsazení proměnná.

Offsetové třídy

Přesunout sloupce doprava pomocí .offset-md-*tříd. Tyto třídy zvětšují levý okraj sloupce o *sloupce. Například .offset-md-4přesune .col-md-4přes čtyři sloupce.

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

Kromě vymazání sloupců v responzivních zarážkách může být nutné resetovat posuny. Podívejte se na to v akci v příkladu mříž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

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

Maržové nástroje

S přechodem na flexbox ve verzi 4 můžete použít nástroje pro okraje, jako .me-autoje vynucení sourozeneckých sloupců od sebe.

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

Samostatné třídy sloupců

Třídy .col-*lze také použít mimo a .rowk tomu, aby prvek získal určitou šířku. Kdykoli jsou třídy sloupců použity jako nepřímé potomky řádku, jsou výplně vynechány.

.col-3: šířka 25 %

.col-sm-9: šířka 75 % nad bodem přerušení sm

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

Třídy lze použít společně s nástroji k vytvoření responzivních plovoucích obrázků. .clearfixPokud je text kratší , nezapomeňte zabalit obsah do obalu, aby se vyčistil plovoucí objekt.

Odstavec zástupného textu. Používáme ji zde, abychom ukázali použití třídy clearfix. Přidáváme zde několik nesmyslných frází, abychom ukázali, jak zde sloupce interagují s plovoucím obrázkem.

Jak můžete vidět, odstavce ladně obtékají plovoucí obrázek. Nyní si představte, jak by to vypadalo s nějakým skutečným obsahem, spíše než s tímto nudným zástupným textem, který pokračuje dál a dál, ale ve skutečnosti neposkytuje žádné hmatatelné informace. Jednoduše zabírá místo a opravdu by se to nemělo číst.

A přesto jste tady, stále vytrvale čtete tento zástupný text a doufáte v nějaké další poznatky nebo nějaké skryté easter egg obsahu. Možná vtip. Nic z toho tady bohužel není.

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