Dálkar

Lærðu hvernig á að breyta dálkum með handfylli valkosta fyrir röðun, röðun og jöfnun þökk sé flexbox ristkerfinu okkar. Auk þess, sjáðu hvernig á að nota dálkaflokka til að stjórna breiddum þátta sem ekki eru rist.

Á þessari síðu

Höfuð upp! Vertu viss um að lesa Grid síðuna fyrst áður en þú kafar í hvernig á að breyta og sérsníða rist dálka þína.

Hvernig þeir virka

Súlur byggja á flexbox arkitektúr ristarinnar. Flexbox þýðir að við höfum möguleika á að breyta einstökum dálkum og breyta hópum af dálkum á línustigi . Þú velur hvernig dálkar stækka, minnka eða breytast á annan hátt.
Þegar byggt er upp rist skipulag fer allt efni í dálka. Stigveldi ristarinnar Bootstrap fer frá gámi í röð í dálk að innihaldi þínu. Í einstaka tilfellum gætirðu sameinað efni og dálk, en hafðu í huga að það getur haft óviljandi afleiðingar.
Bootstrap inniheldur fyrirfram skilgreinda flokka til að búa til hröð, móttækileg skipulag. Með sex brotpunktum og tugi dálka á hverju töflustigi, höfum við heilmikið af flokkum þegar búið til fyrir þig til að búa til viðeigandi skipulag. Þetta er hægt að slökkva á í gegnum Sass ef þú vilt.

Jöfnun

Notaðu flexbox jöfnunartól til að samræma dálka lóðrétt og lárétt.

Lóðrétt jöfnun

Einn af þremur dálkum

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

Einn af þremur dálkum

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

Lárétt jöfnun

Einn af tveimur dálkum

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

Súluumbúðir

Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.

.col-9

.col-4
Þar sem 9 + 4 = 13 > 12, verður þessari 4 dálka breiðu div vafinn inn á nýja línu sem ein samfelld eining.

.col-6
Síðari dálkar halda áfram eftir nýju línunni.

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

Dálkaskil

Að brjóta dálka í nýja línu í flexbox krefst smá hakks: bættu við þætti með width: 100%hvar sem þú vilt vefja dálkana þína í nýja línu. Venjulega er þetta gert með mörgum .rows, en ekki sérhver útfærsluaðferð getur gert grein fyrir þessu.

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

Þú getur líka notað þetta hlé á tilteknum brotastöðum með móttækilegum skjátólum okkar .

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

Endurröðun

Pantaðu námskeið

Notaðu .order-flokka til að stjórna sjónrænni röð efnisins þíns. Þessir flokkar eru móttækilegir, svo þú getur stillt ordereftir brotpunkt (td .order-1.order-md-2). Inniheldur stuðning fyrir 1gegnum 5öll sex kerfisþrepin.

Fyrst í DOM, engin röð notuð

Annað í DOM, með stærri pöntun

Þriðji í DOM, með röðina 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>

Það eru líka móttækilegir .order-firstog .order-lastflokkar sem breyta orderfrumefni með því að beita order: -1og order: 6, í sömu röð. Þessum flokkum er einnig hægt að blanda saman við númeruðu .order-*flokkana eftir þörfum.

Fyrst í DOM, pantað síðast

Annað í DOM, óraðað

Þriðji í DOM, pantaði fyrst

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

Á móti dálkum

Þú getur jafnað töflusúlur á tvo vegu: móttækilegir .offset-töfluflokkar okkar og framlegðartæki . Grid flokkar eru stærðir til að passa við dálka á meðan spássíur eru gagnlegri fyrir fljótleg skipulag þar sem breidd offsetsins er breytileg.

Offset flokkar

Færðu dálka til hægri með því að nota .offset-md-*flokka. Þessir flokkar auka vinstri spássíu dálks með *dálkum. Til dæmis .offset-md-4færist .col-md-4yfir fjóra dálka.

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

Auk dálkahreinsunar á móttækilegum brotastöðum gætirðu þurft að endurstilla frávik. Sjáðu þetta í aðgerð í töfludæminu .

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

Framlegðarveitur

Með flutningnum yfir í flexbox í v4 geturðu notað framlegðartól eins og .me-autoað þvinga systkinasúlur frá hver öðrum.

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

Sjálfstæðir dálkaflokkar

Einnig .col-*er hægt að nota flokkana utan a .rowtil að gefa frumefni ákveðna breidd. Alltaf þegar dálkaflokkar eru notaðir sem óbein börn í röð er fyllingunum sleppt.

.col-3: breidd 25%

.col-sm-9: breidd 75% yfir sm brotpunkti

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

Hægt er að nota flokkana ásamt tólum til að búa til móttækilegar fljótandi myndir. Gakktu úr skugga um að vefja innihaldinu inn í .clearfixumbúðir til að hreinsa flotið ef textinn er styttri.

Málsgrein af staðsetningartexta. Við erum að nota það hér til að sýna notkun á clearfix bekknum. Við erum að bæta við nokkrum tilgangslausum setningum hér til að sýna fram á hvernig súlurnar hafa samskipti hér við fljótandi myndina.

Eins og þú sérð vefja málsgreinarnar þokkafullar um flotmyndina. Ímyndaðu þér núna hvernig þetta myndi líta út með raunverulegu innihaldi hér inni, frekar en bara þessum leiðinlega staðsetningartexta sem heldur áfram og heldur áfram, en gefur í raun engar áþreifanlegar upplýsingar um. Hún tekur einfaldlega pláss og ætti í raun ekki að lesa hana.

Og samt, hér ertu, enn þrautseigur við að lesa þennan staðsetningartexta, í von um frekari innsýn, eða eitthvað falið páskaegg af innihaldi. Brandari kannski. Því miður er ekkert af því hér.

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