in English

Veerud

Siit saate teada, kuidas tänu meie flexbox ruudustikusüsteemile veerge muuta, kasutades käputäie joondus-, järjestamis- ja nihkevalikuid. Lisaks vaadake, kuidas kasutada veeruklasse mitte-ruudustiku elementide laiuste haldamiseks.

Sellel lehel

Pea püsti! Enne ruudustiku veergude muutmise ja kohandamise käsitlemist lugege kindlasti esmalt läbi ruudustiku leht .

Kuidas nad töötavad

Veerud põhinevad ruudustiku flexbox-arhitektuuril. Flexbox tähendab, et meil on valikud üksikute veergude muutmiseks ja veergude rühmade muutmiseks rea tasemel . Saate valida, kuidas veerud kasvavad, kahanevad või muul viisil muutuvad.
Ruudustiku paigutuste koostamisel läheb kogu sisu veergudesse. Bootstrapi ruudustiku hierarhia ulatub konteinerist reast veergu ja teie sisuni. Harvadel juhtudel võite sisu ja veeru kombineerida, kuid pidage meeles, et sellel võivad olla soovimatud tagajärjed.
Bootstrap sisaldab eelmääratletud klasse kiirete ja tundlike paigutuste loomiseks. Kuue katkestuspunkti ja tosina veeruga igal ruudustikutasandil on meil juba loodud kümneid klasse, et saaksite soovitud paigutusi luua. Soovi korral saab selle Sassi kaudu keelata.

Joondamine

Kasutage veergude vertikaalseks ja horisontaalseks joondamiseks flexboxi joondusutiliite.

Vertikaalne joondus

Üks kolmest veerust

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

Üks kolmest veerust

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

Horisontaalne joondamine

Üks kahest veerust

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

Veeru mähkimine

Kui ühte ritta paigutatakse rohkem kui 12 veergu, murrab iga lisaveergude rühm ühe üksusena uuele reale.

.col-9

.col-4
Kuna 9 + 4 = 13 > 12, mähitakse see 4 veeru laiune jaotus ühe külgneva üksusena uuele reale.

.col-6
Järgmised veerud jätkavad uut rida.

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

Veergude katkestused

Veergude purustamine uuele reale flexboxis nõuab väikest häkkimist: lisage uuele reale element, width: 100%kuhu soovite oma veerud mähkida. Tavaliselt saavutatakse see mitme .rows-ga, kuid mitte iga rakendusmeetod ei saa seda arvesse võtta.

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

Saate seda pausi rakendada ka teatud katkestuspunktides meie tundlike kuvautiliitidega .

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

Ümberjärjestamine

Telli klassid

Kasutage .order-klasse oma sisu visuaalse järjestuse kontrollimiseks. Need klassid on tundlikud, nii et saate määrata orderkatkestuspunkti (nt .order-1.order-md-2). Sisaldab läbipääsu tuge 1kõigil 5kuuel ruudustikutasandil.

Esiteks DOM-is, järjekorda ei rakendatud

Teiseks DOM-is, suurema tellimusega

DOM-is kolmas, järjestusega 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>

Samuti on olemas reageerivad .order-firstja .order-lastklassid, mis muudavad orderelemendi väärtust, rakendades vastavalt order: -1ja order: 6. Neid klasse saab vastavalt vajadusele ka nummerdatud .order-*klassidega segada.

Esimene DOM-is, tellitud viimasena

DOM-is teine, järjestamata

Kolmas DOM-is, tellitud esimesena

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

Veergude tasaarvestamine

Saate ruudustiku veerge nihutada kahel viisil: meie reageerivad .offset-ruudustikuklassid ja meie marginaaliutiliidid . Ruudustiku klassid on kohandatud veergudele, samas kui veerised on kasulikumad kiirete paigutuste jaoks, kus nihke laius on muutuv.

Offset klassid

.offset-md-*Liigutage veerge klasside abil paremale . Need klassid suurendavad veeru vasakut veerist *veergude kaupa. Näiteks .offset-md-4liigub .col-md-4üle nelja veeru.

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

Lisaks reageerivate katkestuspunktide veergude tühjendamisele peate võib-olla lähtestama nihkeid. Vaadake seda tegevuses ruudustiku näites .

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

Marginaali kommunaalteenused

V4-s flexboxile üleminekul saate kasutada veerise utiliite, näiteks .me-autosundida vendade veerge üksteisest eemale.

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

Eraldiseisvad veeruklassid

Klasse .col-*saab kasutada ka väljaspool a .row, et anda elemendile konkreetne laius. Kui veeruklasse kasutatakse rea mitteotseste alamridadena, jäetakse täidised välja.

.col-3: laius 25%

.col-sm-9: laius 75% üle sm murdepunkti

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

Klassid saab kasutada koos utiliitidega, et luua reageerivaid ujuvpilte. Kui tekst on lühem , mähkige see kindlasti .clearfixümbrisesse, et ujuk kustutada.

Kohatäideteksti lõik. Me kasutame seda siin, et näidata clearfix klassi kasutamist. Lisame siia üsna palju mõttetuid fraase, et näidata, kuidas veerud siin ujuva pildiga suhtlevad.

Nagu näete, keerduvad lõigud graatsiliselt ümber hõljuva pildi. Kujutage nüüd ette, kuidas see näeks välja tegeliku sisuga, mitte ainult selle igava kohatäidetekstiga, mis jätkub ja jätkub, kuid tegelikult ei anna käegakatsutavat teavet. See võtab lihtsalt ruumi ja seda ei tohiks tegelikult lugeda.

Ja ometi, siin sa oled, ikka järjekindlalt seda kohatäideteksti lugedes, lootes veel mõningaid teadmisi või varjatud lihavõttemuna sisu. Nali ehk. Kahjuks siin seda pole.

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