Kolomme

Leer hoe om kolomme te verander met 'n handvol opsies vir belyning, ordening en verrekening danksy ons flexbox-roosterstelsel. Sien boonop hoe om kolomklasse te gebruik om wydtes van nie-roosterelemente te bestuur.

Op hierdie bladsy

Let op! Maak seker dat u eers die roosterbladsy lees voordat u ingaan op hoe om u roosterkolomme te wysig en aan te pas.

Hoe hulle werk

Kolomme bou op die rooster se flexbox-argitektuur. Flexbox beteken dat ons opsies het om individuele kolomme te verander en groepe kolomme op ryvlak te wysig . Jy kies hoe kolomme groei, krimp of andersins verander.
Wanneer roosteruitlegte gebou word, gaan alle inhoud in kolomme. Die hiërargie van Bootstrap se rooster gaan van houer na ry na kolom na jou inhoud. By seldsame geleenthede kan jy inhoud en kolom kombineer, maar wees bewus daarvan dat daar onbedoelde gevolge kan wees.
Bootstrap bevat vooraf gedefinieerde klasse vir die skep van vinnige, responsiewe uitlegte. Met ses breekpunte en 'n dosyn kolomme by elke roostervlak, het ons dosyne klasse wat reeds vir jou gebou is om jou gewenste uitlegte te skep. Dit kan deur Sass gedeaktiveer word as jy wil.

Belyning

Gebruik flexbox-belyningshulpmiddels om kolomme vertikaal en horisontaal in lyn te bring.

Vertikale belyning

Een van drie kolomme

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>

Een van drie kolomme

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>

Horisontale belyning

Een van twee kolomme

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>

Kolom wikkel

As meer as 12 kolomme binne 'n enkele ry geplaas word, sal elke groep ekstra kolomme, as een eenheid, op 'n nuwe lyn toegedraai word.

.kol-9

.col-4
Aangesien 9 + 4 = 13 > 12, word hierdie 4-kolom-wye div op 'n nuwe lyn toegedraai as een aaneenlopende eenheid.

.col-6
Volgende kolomme gaan voort langs die nuwe lyn.

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>

Kolombreuke

Om kolomme na 'n nuwe lyn in flexbox te breek, vereis 'n klein hack: voeg 'n element by width: 100%waar jy jou kolomme ook al wil omvou na 'n nuwe lyn. Normaalweg word dit met veelvuldige s bewerkstellig .row, maar nie elke implementeringsmetode kan hiervoor rekening hou nie.

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

Jy kan ook hierdie breek by spesifieke breekpunte toepas met ons responsiewe vertoonhulpmiddels .

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

Herrangskik

Bestel klasse

Gebruik .order-klasse om die visuele volgorde van jou inhoud te beheer. Hierdie klasse reageer, so jy kan die orderdeurbreekpunt (bv. .order-1.order-md-2). Sluit ondersteuning vir 1deur 5al ses roostervlakke in.

Eerste in DOM, geen bestelling toegepas nie

Tweede in DOM, met 'n groter bestelling

Derde in DOM, met 'n orde van 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>

Daar is ook responsiewe .order-firsten .order-lastklasse wat die ordervan 'n element verander deur onderskeidelik order: -1en order: 6toe te pas. Hierdie klasse kan ook vermeng word met die genommerde .order-*klasse soos nodig.

Eerste in DOM, laaste bestel

Tweede in DOM, ongeord

Derde in DOM, eerste bestel

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>

Verrekening van kolomme

Jy kan roosterkolomme op twee maniere verreken: ons responsiewe .offset-roosterklasse en ons marge-hulpprogramme . Roosterklasse is gegrootte om by kolomme te pas, terwyl marges nuttiger is vir vinnige uitlegte waar die wydte van die afwyking veranderlik is.

Verreken klasse

Skuif kolomme na regs deur .offset-md-*klasse te gebruik. Hierdie klasse vergroot die linkerkantlyn van 'n kolom met *kolomme. .offset-md-4Beweeg byvoorbeeld .col-md-4oor vier kolomme.

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

Benewens die skoonmaak van kolomme by responsiewe breekpunte, moet jy dalk afwykings terugstel. Sien dit in aksie in die roostervoorbeeld .

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

Marge nutsdienste

Met die skuif na flexbox in v4, kan u marge-hulpmiddels gebruik soos .me-autoom broers en susterskolomme van mekaar weg te dwing.

.col-md-4

.col-md-4 .ms-outo

.col-md-3 .ms-md-outo

.col-auto .me-outo

.col-outo

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>

Selfstandige kolomklasse

Die .col-*klasse kan ook buite 'n gebruik word .rowom 'n element 'n spesifieke breedte te gee. Wanneer kolomklasse as nie-direkte kinders van 'n ry gebruik word, word die opvullings weggelaat.

.col-3: breedte van 25%

.col-sm-9: breedte van 75% bo sm-breekpunt

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>

Die klasse kan saam met nutsprogramme gebruik word om responsiewe gesweefde beelde te skep. Maak seker dat jy die inhoud in 'n .clearfixomhulsel toedraai om die vlot skoon te maak as die teks korter is.

'n Paragraaf van plekhouerteks. Ons gebruik dit hier om die gebruik van die clearfix-klas te wys. Ons voeg 'n hele paar betekenislose frases hier by om te demonstreer hoe die kolomme hier in wisselwerking tree met die gesweefde beeld.

Soos jy kan sien, draai die paragrawe grasieus om die gesweefde beeld. Stel jou nou voor hoe dit sal lyk met 'n mate van werklike inhoud hier, eerder as net hierdie vervelige plekhouer teks wat aanhou en aanhou, maar eintlik geen tasbare inligting oordra nie. Dit neem eenvoudig plek op en moet nie regtig gelees word nie.

En tog, hier is jy, nog steeds volhard om hierdie plekhouer-teks te lees, met die hoop op nog 'n paar insigte, of 'n verborge paaseier van inhoud. Miskien 'n grap. Ongelukkig is daar niks hiervan nie.

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>