Sarakkeet

Opi muokkaamaan sarakkeita kourallisilla kohdistus-, järjestys- ja offset-vaihtoehdoilla flexbox-ruudukkojärjestelmämme ansiosta. Lisäksi katso, kuinka sarakeluokkien avulla voit hallita muiden kuin ruudukkoelementtien leveyksiä.

Tällä sivulla

Varoitus! Muista lukea Ruudukko-sivu ennen kuin sukeltaa ruudukon sarakkeiden muokkaamiseen ja mukauttamiseen.

Miten ne toimivat

Sarakkeet rakentuvat ruudukon flexbox-arkkitehtuurille. Flexbox tarkoittaa, että meillä on vaihtoehtoja muuttaa yksittäisiä sarakkeita ja muokata sarakeryhmiä rivitasolla . Voit valita, miten sarakkeet kasvavat, pienenevät tai muutoin muuttuvat.
Kun rakennat ruudukkoasetteluja, kaikki sisältö menee sarakkeisiin. Bootstrapin ruudukon hierarkia kulkee säilöstä riviin sarakkeeseen sisältöösi. Harvinaisissa tapauksissa voit yhdistää sisällön ja sarakkeen, mutta muista, että sillä voi olla ei-toivottuja seurauksia.
Bootstrap sisältää ennalta määritellyt luokat nopeiden, reagoivien asettelujen luomiseen. Jokaisella ruudukkotasolla on kuusi keskeytyspistettä ja tusina saraketta, joten meillä on jo valmiina kymmeniä luokkia, joiden avulla voit luoda haluamasi asettelut. Tämä voidaan halutessasi poistaa käytöstä Sassin kautta.

Tasaus

Käytä flexbox-kohdistusapuohjelmia sarakkeiden kohdistamiseen pysty- ja vaakasuunnassa.

Pystysuuntainen kohdistus

Yksi kolmesta sarakkeesta

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

Yksi kolmesta sarakkeesta

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

Vaakasuora kohdistaminen

Toinen kahdesta sarakkeesta

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

Sarakkeen kääre

Jos yhdelle riville sijoitetaan enemmän kuin 12 saraketta, jokainen ylimääräisten sarakkeiden ryhmä rivittyy yhtenä yksikkönä uudelle riville.

.col-9

.col-4
Koska 9 + 4 = 13 > 12, tämä 4 sarakkeen levyinen div kääritään uudelle riville yhtenä yhtenäisenä yksikkönä.

.col-6
Seuraavat sarakkeet jatkavat uutta riviä pitkin.

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

Sarake katkeaa

Sarakkeiden katkaiseminen uudelle riville flexboxissa vaatii pienen hakkeroinnin: lisää elementti uudelle riville, width: 100%missä haluat rivittää sarakkeet. Normaalisti tämä suoritetaan useilla .rows:illä, mutta kaikki toteutustavat eivät voi ottaa huomioon tätä.

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

Voit myös käyttää tätä taukoa tietyissä keskeytyspisteissä responsiivisten näyttöapuohjelmiemme avulla .

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

Järjestetään uudelleen

Tilaa luokat

Käytä .order-luokkia hallitaksesi sisältösi visuaalista järjestystä . Nämä luokat ovat responsiivisia, joten voit asettaa orderkeskeytyskohdan (esim. .order-1.order-md-2). Sisältää tuen 1läpikäymiselle 5kaikilla kuudella ruudukkotasolla.

Ensin DOM:ssa, tilausta ei sovellettu

Toiseksi DOM:ssa, suuremmalla tilauksella

Kolmas DOM:ssa, järjestyksessä 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>

On myös responsiivisia .order-firstja .order-lastluokkia, jotka muuttavat orderelementin soveltamista order: -1ja order: 6vastaavasti. Nämä luokat voidaan myös tarvittaessa sekoittaa numeroituihin .order-*luokkiin.

Ensimmäinen DOM:ssa, tilattu viimeisenä

Toinen DOM:ssa, järjestämätön

Kolmas DOM:ssa, tilattu ensin

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

Sarakkeiden offsetointi

Voit siirtää ruudukon sarakkeita kahdella tavalla: responsiiviset .offset-ruudukkoluokat ja marginaaliapuohjelmamme . Ruudukkoluokat on mitoitettu vastaamaan sarakkeita, kun taas marginaalit ovat hyödyllisempiä nopeissa asetteluissa, joissa siirtymän leveys vaihtelee.

Offset-luokat

Siirrä sarakkeita oikealle .offset-md-*luokkien avulla. Nämä luokat lisäävät sarakkeen vasenta marginaalia *sarakkeilla. Esimerkiksi .offset-md-4siirtyy .col-md-4neljän sarakkeen yli.

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

Responsiivisten keskeytyspisteiden sarakkeen tyhjentämisen lisäksi saatat joutua nollaamaan siirtymät. Katso tämä toiminnassa ruudukkoesimerkissä .

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

Marginaaliset apuohjelmat

Kun olet siirtynyt flexboxiin v4:ssä, voit käyttää marginaaliapuohjelmia, kuten .me-autopakottaa sisarussarakkeet poispäin toisistaan.

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

Itsenäiset sarakeluokat

Luokkia .col-*voidaan käyttää myös a:n ulkopuolella .rowantamaan elementille tietty leveys. Aina kun sarakeluokkia käytetään rivin ei-suorina lapsina, täytteet jätetään pois.

.col-3: leveys 25 %

.col-sm-9: leveys 75 % sm-rajapisteen yläpuolella

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

Luokkia voidaan käyttää yhdessä apuohjelmien kanssa responsiivisten kelluvien kuvien luomiseen. Muista kääriä sisältö .clearfixkääreeseen poistaaksesi kellunta, jos teksti on lyhyempi.

Kappale paikkamerkkitekstiä. Käytämme sitä tässä osoittamaan clearfix-luokan käyttöä. Lisäämme tähän muutamia merkityksettömiä lauseita osoittamaan, kuinka sarakkeet ovat vuorovaikutuksessa kelluvan kuvan kanssa.

Kuten näet, kappaleet kietoutuvat kauniisti kelluvan kuvan ympärille. Kuvittele nyt, miltä tämä näyttäisi todellisen sisällön kanssa, sen sijaan, että tämä tylsä paikkamerkkiteksti jatkuu ja jatkuu, mutta ei välitä konkreettista tietoa. Se yksinkertaisesti vie tilaa, eikä sitä todellakaan pidä lukea.

Ja kuitenkin, tässä sinä olet edelleen sinnikkäästi lukemassa tätä paikkamerkkitekstiä, toivoen lisää oivalluksia tai jotain piilotettua pääsiäismunaa. Ehkä vitsi. Valitettavasti täällä ei ole sellaista.

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