Oszlopok

Ismerje meg, hogyan módosíthat oszlopokat a flexbox rácsrendszerünknek köszönhetően néhány igazítási, rendezési és eltolási lehetőséggel. Ezenkívül nézze meg, hogyan használhat oszloposztályokat a nem rácselemek szélességének kezelésére.

Ezen az oldalon

Fel a fejjel! Mielőtt belevágna a rácsoszlopok módosításába és testreszabásába, először olvassa el a Rács oldalt .

Hogyan működnek

Az oszlopok a rács flexbox architektúrájára épülnek. A Flexbox azt jelenti, hogy lehetőségeink vannak az egyes oszlopok módosítására és az oszlopcsoportok sorszintű módosítására . Kiválaszthatja, hogy az oszlopok hogyan növekedjenek, zsugorodjanak vagy más módon változzanak.
A rácselrendezések létrehozásakor minden tartalom oszlopokba kerül. A Bootstrap rácsának hierarchiája tárolóról sorról oszlopra halad a tartalomig . Ritka esetekben kombinálhatja a tartalmat és az oszlopot, de ne feledje, hogy nem kívánt következményei lehetnek.
A Bootstrap előre meghatározott osztályokat tartalmaz a gyors, érzékeny elrendezések létrehozásához. Hat törésponttal és egy tucat oszloppal minden rácsszinten, már több tucat osztályt építettünk fel, amelyek segítségével létrehozhatja a kívánt elrendezéseket. Ez a Sass-on keresztül kikapcsolható, ha szeretné.

Igazítás

Használja a flexbox igazító segédprogramokat az oszlopok függőleges és vízszintes igazításához.

Függőleges igazítás

A három oszlop egyike

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

A három oszlop egyike

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

Vízszintes igazítás

A két oszlop egyike

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

Oszlop burkolása

Ha egy sorban több mint 12 oszlop van elhelyezve, a további oszlopok minden csoportja egy egységként új sorba kerül.

.col-9

.col-4
Mivel 9 + 4 = 13 > 12, ez a 4 oszlop széles div egy összefüggő egységként egy új sorba kerül.

.col-6
A következő oszlopok az új sor mentén folytatódnak.

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

Oszloptörések

Az oszlopok új sorra töréséhez a flexboxban egy kis feltörésre van szükség: adjon hozzá egy elemet, width: 100%ahol az oszlopokat egy új sorba szeretné tördelni. Általában ez több s-vel valósul meg .row, de nem minden megvalósítási módszer képes ezt figyelembe venni.

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

Ezt a szünetet bizonyos töréspontokon is alkalmazhatja a reszponzív megjelenítési segédprogramjainkkal .

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

Újrarendelés

Rendelési osztályok

Használjon .order-osztályokat a tartalom vizuális sorrendjének szabályozására . Ezek az osztályok reszponzívak, így beállíthatja a ordertöréspontot (pl. .order-1.order-md-2). Mind a hat rácsszinten támogatja az 1áthaladást .5

Először a DOM-ban, nincs rendelés

Második a DOM-ban, nagyobb rendeléssel

Harmadik a DOM-ban, 1-es sorrenddel

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

Vannak olyan reszponzív .order-firstés .order-lastosztályok is, amelyek megváltoztatják orderegy elem értékét a order: -1és a alkalmazásával order: 6. Ezeket az osztályokat szükség szerint össze is lehet keverni a számozott .order-*osztályokkal.

Első a DOM-ban, utoljára rendelve

Második a DOM-ban, rendezetlen

Harmadik a DOM-ban, először megrendelve

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

Oszlopok eltolása

A rácsoszlopokat kétféleképpen tolhatja el: a reszponzív .offset-rácsosztályainkkal és a margin segédprogramjainkkal . A rácsosztályok mérete az oszlopokhoz igazodik, míg a margók hasznosabbak olyan gyors elrendezéseknél, ahol az eltolás szélessége változó.

Offset osztályok

Oszlopok mozgatása jobbra .offset-md-*osztályok használatával. Ezek az osztályok oszlopokkal növelik az oszlop bal margóját *. Például négy oszlop felett .offset-md-4mozog ..col-md-4

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

A reagáló töréspontoknál az oszloptörlés mellett előfordulhat, hogy vissza kell állítania az eltolásokat. Tekintse meg ezt működés közben a rácspéldában .

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

Margin segédprogramok

A 4-es verzióban a flexboxra való átállással margó-segédprogramokat használhat, például .me-autoa testvéroszlopok egymástól való távolítását.

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

Önálló oszloposztályok

Az .col-*osztályok a a-n kívül is használhatók .row, hogy egy elemnek meghatározott szélességet adjunk. Ha az oszloposztályokat egy sor nem közvetlen utódjaként használjuk, a kitöltések kimaradnak.

.col-3: szélesség 25%

.col-sm-9: szélesség 75%-kal az sm töréspont felett

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

Az osztályok segédprogramokkal együtt használhatók reszponzív lebegtetett képek létrehozására. Ügyeljen arra, hogy a tartalmat egy .clearfixburkolóanyagba csomagolja a lebegés törléséhez, ha a szöveg rövidebb.

Helyőrző szöveg egy bekezdése. Itt a clearfix osztály használatának bemutatására használjuk. Jó néhány értelmetlen kifejezést adunk ide annak bemutatására, hogy az oszlopok itt hogyan hatnak egymásra a lebegtetett képpel.

Amint láthatja, a bekezdések kecsesen körbeveszik a lebegtetett képet. Képzeld el, hogyan nézne ki ez egy tényleges tartalommal, nem csak ezzel az unalmas helyőrző szöveggel, amely folyamatosan megy, de valójában nem közvetít kézzelfogható információt. Egyszerűen helyet foglal, és nem igazán érdemes elolvasni.

És mégis, itt van, továbbra is kitartóan olvassa ezt a helyőrző szöveget, remélve, hogy további meglátásokra, vagy valami rejtett húsvéti tojásra vágyik. Talán vicc. Sajnos itt nincs ilyen.

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