Kolonnen

Léiert wéi Dir Sailen ännert mat enger Handvoll Optiounen fir Ausrichtung, Uerdnung an Offset dank eisem Flexbox Gittersystem. Plus, kuckt wéi Dir Kolonnklassen benotzt fir Breet vun Net-Gitter Elementer ze managen.

Op dëser Säit

Kapp erop! Gitt sécher datt Dir d'Gitter Säit fir d' éischt liest ier Dir an d'Taucht a wéi Dir Är Gitterkolonnen ännert an personaliséiere kënnt.

Wéi si schaffen

Kolonnen bauen op der Flexbox Architektur vum Gitter. Flexbox heescht datt mir Optiounen hunn fir eenzel Kolonnen z'änneren an Gruppe vu Kolonnen um Zeileniveau z'änneren . Dir wielt wéi Spalten wuessen, schrumpfen oder soss änneren.
Wann Dir Gitter Layouten baut, geet all Inhalt a Kolonnen. D'Hierarchie vum Bootstrap Gitter geet vu Container zu Zeil an Kolonn op Ären Inhalt. An seltenen Occasiounen kënnt Dir Inhalt a Kolonn kombinéieren, awer bewosst datt et onbedéngt Konsequenze kann sinn.
Bootstrap enthält virdefinéiert Klassen fir séier, reaktiounsfäeger Layouten ze kreéieren. Mat sechs Breakpoints an eng Dose Sailen op all Gittertier, hu mir Dosende vu Klassen scho fir Iech gebaut fir Är gewënschte Layouten ze kreéieren. Dëst kann iwwer Sass ausgeschalt ginn wann Dir wëllt.

Ausriichtung

Benotzt Flexbox Ausrichtung Utilities fir vertikal an horizontal Spalten ze alignéieren.

Vertikal Ausrichtung

Eng vun dräi Kolonnen

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>

Eng vun dräi Kolonnen

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>

Horizontal Ausrichtung

Eng vun zwou Kolonnen

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>

Kolonne Wrap

Wa méi wéi 12 Kolonnen an enger eenzeger Zeil plazéiert sinn, wäert all Grupp vun extra Kolonnen als eng Eenheet op eng nei Linn wéckelen.

.col-9

.col-4
Zënter 9 + 4 = 13> 12, gëtt dës 4-Kolonn-breet Div op eng nei Linn als eng kontinuéierlech Eenheet gewéckelt.

.col-6 Pafolgende
Saile weider laanscht déi nei Linn.

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>

Kolonn brécht

Spalten op eng nei Zeil an Flexbox briechen erfuerdert e klengen Hack: füügt en Element mat width: 100%wou Dir Är Kolonnen op eng nei Linn wéckele wëllt. Normalerweis gëtt dëst mat multiple .rows erreecht, awer net all Implementéierungsmethod kann dëst berechnen.

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

Dir kënnt dës Paus och bei spezifesche Breakpunkte mat eise reaktiounsfäeger Display-Utilities uwenden .

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

Neibestellung

Klassen bestellen

Benotzt .order-Klassen fir d' visuell Uerdnung vun Ärem Inhalt ze kontrolléieren. Dës Klassen si reaktiounsfäeger, sou kënnt Dir den orderduerch Breakpoint astellen (zB. .order-1.order-md-2). Ëmfaasst Ënnerstëtzung fir 1duerch 5iwwer all sechs Gitterniveauen.

Éischt an DOM, keng Uerdnung applizéiert

Zweeten am DOM, mat enger méi grousser Uerdnung

Drëtt am DOM, mat enger Uerdnung vun 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>

Et ginn och reaktiounsfäeger .order-firsta .order-lastKlassen déi ordervun engem Element änneren andeems Dir order: -1an order: 6bzw. Dës Klassen kënnen och mat den nummeréierte .order-*Klassen gemëscht ginn wéi néideg.

Éischt an DOM, lescht bestallt

Zweet am DOM, ongeuerdnet

Drëtt an DOM, éischt bestallt

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>

Offset Sailen

Dir kënnt Gitterkolonnen op zwou Weeër kompenséieren: eis reaktiounsfäeg .offset-Gitterklassen an eis Margin Utilities . Gitterklassen si Gréisst fir Spalten ze passen, während Marge méi nëtzlech si fir séier Layouten wou d'Breet vum Offset variabel ass.

Offset Klassen

Beweegt Spalten no riets mat .offset-md-*Klassen. Dës Klassen erhéijen de lénksen Rand vun enger Kolonn duerch *Kolonnen. Zum Beispill, .offset-md-4bewegt .col-md-4iwwer véier Sailen.

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

Zousätzlech zu der Kolonnklärung bei reaktiounsfäeger Breakpunkten, musst Dir eventuell Offsets zrécksetzen. Kuckt dëst an Aktioun am Gitter Beispill .

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

Margin Utilities

Mat der Beweegung op Flexbox am v4, kënnt Dir Margin Utilities benotze wéi .me-autoGeschwësterkolonnen vuneneen fortzwéngen.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .mech-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>

Standalone Kolonn Klassen

D' .col-*Klassen kënnen och ausserhalb engem .rowbenotzt ginn engem Element eng spezifesch Breet ginn. Wann och ëmmer Kolonnklassen als net-direkt Kanner vun enger Zeil benotzt ginn, ginn d'Paddingen ausgelooss.

.col-3: Breet vun 25%

.col-sm-9: Breet vun 75% iwwer sm breakpoint

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>

D'Klassen kënnen zesumme mat Utilities benotzt ginn fir reaktiounsfäeger geschwemmt Biller ze kreéieren. Vergewëssert Iech den Inhalt an engem .clearfixWrapper ze wéckelen fir de Schwämm ze läschen wann den Text méi kuerz ass.

E Paragraphe vum Plazhaltertext. Mir benotzen et hei fir d'Benotzung vun der Clearfix Klass ze weisen. Mir fügen hei zimmlech sënnlos Sätze bäi fir ze demonstréieren wéi d'Säulen hei mat dem geschwemmten Bild interagéieren.

Wéi Dir kënnt gesinn, wéckelen d'Paragrafen graziéis ëm dat geschwemmt Bild. Stellt Iech elo vir wéi dëst mat e puer aktuellen Inhalt hei ausgesäit, anstatt nëmmen dëse langweilege Plazhaltertext deen weider geet, awer tatsächlech keng konkret Informatioun vermëttelt. Et hëlt einfach Plaz a soll net wierklech gelies ginn.

An trotzdem, hei sidd Dir nach ëmmer an der Liesung vun dësem Plazhaltertext, hofft op e puer méi Abléck, oder e verstoppt Ouschteree vum Inhalt. E Witz, vläicht. Leider gëtt et näischt vun deem hei.

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>