Rács rendszer
Használja nagy teljesítményű mobil-első flexbox rácsunkat, hogy bármilyen alakú és méretű elrendezést készítsen a tizenkét oszloprendszernek, az öt alapértelmezett reagáló rétegnek, a Sass-változóknak és mixineknek, valamint a tucatnyi előre meghatározott osztálynak köszönhetően.
Hogyan működik
A Bootstrap rácsrendszere tárolók, sorok és oszlopok sorozatát használja a tartalom elrendezéséhez és igazításához. Flexbox -szal épült, és teljesen érzékeny. Az alábbiakban egy példa és egy alapos pillantás a rács összeállítására.
Új vagy még nem ismeri a flexboxot? Olvassa el ezt a CSS Tricks flexbox útmutatót a háttérrel, a terminológiával, az irányelvekkel és a kódrészletekkel kapcsolatban.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
A fenti példa három egyenlő szélességű oszlopot hoz létre kis, közepes, nagy és extra nagy eszközökön az előre meghatározott rácsosztályaink segítségével. Ezek az oszlopok az oldal közepén vannak a szülővel .container
.
Lebontásban a következőképpen működik:
- A tárolók lehetővé teszik a webhely tartalmának középre helyezését és vízszintes párnázottságát. Használja
.container
reszponzív pixelszélességhez vagy.container-fluid
mindenwidth: 100%
nézetablakhoz és eszközmérethez. - A sorok az oszlopok burkolói. Minden oszlopnak van vízszintes
padding
(ún. ereszcsatorna) a köztük lévő tér szabályozására. Eztpadding
azután a negatív margós sorokon ellensúlyozza. Így az oszlopok összes tartalma vizuálisan a bal oldalon lesz igazítva. - Rácselrendezésben a tartalmat az oszlopokon belül kell elhelyezni, és csak az oszlopok lehetnek sorok közvetlen gyermekei.
- A flexboxnak köszönhetően a megadott nélküli rácsoszlopok
width
automatikusan egyenlő szélességű oszlopokként jelennek meg. Például négy példány.col-sm
automatikusan 25%-os széles lesz a kis törésponttól kezdve. További példákért tekintse meg az automatikus elrendezés oszlopait . - Az oszloposztályok azt jelzik, hogy a soronként lehetséges 12 oszlop közül hány oszlopot szeretne használni. Tehát, ha három egyenlő szélességű oszlopot szeretne keresztezni, használhatja a
.col-4
. - Az s oszlopok
width
százalékban vannak megadva, így mindig gördülékenyek és méretezhetők a szülőelemhez képest. - Az oszlopok vízszintesek
padding
az ereszcsatornák létrehozásához az egyes oszlopok között, azonban eltávolíthatja amargin
sorokból éspadding
az oszlopokból a.no-gutters
gombbal.row
. - Annak érdekében, hogy a rács érzékeny legyen, öt rács töréspontja van, mindegyik reszponzív törésponthoz egy : minden töréspont (extra kicsi), kicsi, közepes, nagy és extra nagy.
- A rács töréspontjai a minimális szélességű médialekérdezéseken alapulnak, vagyis arra az egy töréspontra és a felette lévőkre vonatkoznak (pl.
.col-sm-4
kicsi, közepes, nagy és extra nagy eszközökre vonatkoznak, de nem az elsőxs
töréspontra). - Használhat előre meghatározott rácsosztályokat (például
.col-4
) vagy Sass mixineket a szemantikai jelölések javításához.
Legyen tisztában a flexbox korlátaival és hibáival , például azzal, hogy bizonyos HTML-elemeket nem lehet rugalmas tárolóként használni .
Rács opciók
Míg a Bootstrap az em
s-t vagy rem
az s-t használja a legtöbb méret meghatározásához, az px
s-t a rács töréspontjaihoz és a tárolószélességekhez használják. Ennek az az oka, hogy a nézetablak szélessége pixelben van megadva, és nem változik a betűmérettel .
Tekintse meg, hogyan működnek a Bootstrap rácsrendszer egyes elemei több eszközön egy praktikus táblázat segítségével.
Extra kicsi <576 képpont |
Kicsi ≥576 képpont |
Közepes ≥768 képpont |
Nagy ≥ 992 képpont |
Extra nagy ≥1200 képpont |
|
---|---|---|---|---|---|
Maximális konténer szélesség | Nincs (automatikus) | 540 képpont | 720 képpont | 960 képpont | 1140 képpont |
Osztály előtag | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
oszlopok száma | 12 | ||||
Az ereszcsatorna szélessége | 30 képpont (15 képpont az oszlop mindkét oldalán) | ||||
Fészkelhető | Igen | ||||
Oszlopsorrend | Igen |
Oszlopok automatikus elrendezése
Használjon töréspont-specifikus oszloposztályokat az egyszerű oszlopméretezéshez explicit számozott osztályok, például .col-sm-6
.
Egyenlő szélességű
Például itt van két rácselrendezés, amelyek minden eszközre és nézetablakra vonatkoznak, től xs
ig xl
. Adjon hozzá tetszőleges számú egység nélküli osztályt minden szükséges törésponthoz, és minden oszlop azonos szélességű lesz.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Egyenlő szélességű többsoros
Hozzon létre egyforma szélességű oszlopokat, amelyek több sort ívelnek át úgy, hogy beszúrja azt a helyet, .w-100
ahol az oszlopokat új sorra szeretné törni. Tegye érzékenyebbé a szüneteket .w-100
néhány reszponzív megjelenítési segédprogrammal keverve .
Volt egy Safari flexbox hiba , amely megakadályozta, hogy ez explicit flex-basis
vagy nélkül működjön border
. Vannak megoldások a régebbi böngészőverziókhoz, de ezekre nincs szükség, ha a megcélzott böngészők nem tartoznak a hibás verziók közé.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Egy oszlopszélesség beállítása
A flexbox rácsoszlopok automatikus elrendezése azt is jelenti, hogy beállíthatja egy oszlop szélességét, és a testvéroszlopokat automatikusan átméretezheti körülötte. Használhat előre definiált rácsosztályokat (lásd lent), grid mixineket vagy inline szélességet. Vegye figyelembe, hogy a többi oszlop átméreteződik a középső oszlop szélességétől függetlenül.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Változó szélességű tartalom
Használjon col-{breakpoint}-auto
osztályokat az oszlopok méretére a tartalmuk természetes szélessége alapján.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Reszponzív osztályok
A Bootstrap rácsja öt előre definiált osztályt tartalmaz az összetett reszponzív elrendezések létrehozásához. Testreszabhatja az oszlopok méretét az extra kicsi, kicsi, közepes, nagy vagy extra nagy eszközökön, ahogy jónak látja.
Minden töréspont
A legkisebbtől a legnagyobbig azonos rácsokhoz használja a .col
és .col-*
osztályokat. Adjon meg egy számozott osztályt, ha különösen méretű oszlopra van szüksége; ellenkező esetben nyugodtan ragaszkodjon a -hoz .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Vízszintesre rakva
Egyetlen .col-sm-*
osztálykészlet használatával létrehozhat egy alapvető rácsrendszert, amely halmozottan indul, és vízszintessé válik a kis töréspontnál ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Keverd össze és párosítsd
Nem szeretné, hogy az oszlopok egyszerűen egymásra halmozódjanak néhány rácsszinten? Szükség szerint használjon különböző osztályok kombinációját minden réteghez. Tekintse meg az alábbi példát, hogy jobban megértse, hogyan működik mindez.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Ereszcsatornák
Az ereszcsatornák a töréspont-specifikus padding és a negatív margó hasznossági osztályok segítségével érzékenyen beállíthatók. Egy adott sorban lévő ereszcsatornák módosításához párosítson egy negatív margó segédprogramot az s-on .row
és a megfelelő párnázási segédprogramot .col
. Előfordulhat , hogy a .container
vagy .container-fluid
a szülőt is módosítani kell a nem kívánt túlcsordulás elkerülése érdekében, ismételten megfelelő padding segédprogrammal.
Íme egy példa a Bootstrap rács testreszabására a nagy ( lg
) törésponton és felette. Növeltük a .col
párnázást a -val .px-lg-5
, ellensúlyoztuk ezt -val .mx-lg-n5
a szülőn .row
, majd beállítottuk a .container
borítást a -val .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Soroszlopok
A reszponzív .row-cols-*
osztályok segítségével gyorsan beállíthatja a tartalmat és elrendezést legjobban megjelenítő oszlopok számát. Míg a normál .col-*
osztályok az egyes oszlopokra vonatkoznak (pl. .col-md-4
), addig a soroszlopok osztályai a szülőn vannak beállítva .row
parancsikonként.
Ezekkel a soroszlop-osztályokkal gyorsan létrehozhat alapvető rácselrendezéseket vagy vezérelheti a kártyaelrendezéseket.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Használhatja a mellékelt Sass mixint is row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Igazítás
Használja a flexbox igazító segédprogramokat az oszlopok függőleges és vízszintes igazításához. Az Internet Explorer 10-11 nem támogatja a flex elemek függőleges igazítását, ha a rugalmas tároló az min-height
alábbiak szerint rendelkezik. További részletekért lásd: Flexbugs #3.
Függőleges igazítás
<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>
<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
<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>
Nincs ereszcsatorna
Az előre definiált rácsosztályainkban az oszlopok közötti ereszcsatornák a -val eltávolíthatók .no-gutters
. Ez eltávolítja a negatív margin
s-t az összes közvetlen alárendelt oszlopból .row
és a vízszintes elemet.padding
Itt található a stílusok létrehozásának forráskódja. Vegye figyelembe, hogy az oszlopfelülírások csak az első alárendelt oszlopokra vonatkoznak, és az attribútumválasztóval célozzák őket . Noha ez egy specifikusabb választót generál, az oszlopok kitöltése továbbra is tovább testreszabható a térköz segédprogramokkal .
Széltől szélig terjedő tervezésre van szüksége? Dobd el a szülőt .container
vagy .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
A gyakorlatban így néz ki. Vegye figyelembe, hogy ezt továbbra is használhatja az összes többi előre definiált rácsosztályhoz (beleértve az oszlopszélességeket, az adaptív rétegeket, az átrendezéseket és egyebeket).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</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.
Mivel 9 + 4 = 13 > 12, ez a 4 oszlop széles div egy összefüggő egységként egy új sorba kerül.
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 > 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.
<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 .
<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 order
töréspontot (pl. .order-1.order-md-2
). Mind az öt rácsszinten támogatja az 1
áthaladást .12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
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-last
osztályok is, amelyek megváltoztatják order
egy elem értékét a order: -1
és order: 13
( order: $columns + 1
) alkalmazásával. Ezeket az osztályokat szükség szerint össze is lehet keverni a számozott .order-*
osztályokkal.
<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-4
mozog ..col-md-4
<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 .
<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 .mr-auto
a testvéroszlopok egymástól való távolítását.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Fészekrakás
Ha be szeretné ágyazni a tartalmat az alapértelmezett rácsba, adjon hozzá egy új .row
oszlopkészletet .col-sm-*
egy meglévő .col-sm-*
oszlophoz. A beágyazott soroknak olyan oszlopokat kell tartalmazniuk, amelyek összesen legfeljebb 12 oszlopot tartalmazhatnak (nem kötelező mind a 12 elérhető oszlopot használni).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins
A Bootstrap Sass-forrásfájljainak használatakor lehetősége van Sass-változók és mixinek használatával egyéni, szemantikai és reszponzív oldalelrendezések létrehozására. Előre definiált rácsosztályaink ugyanezeket a változókat és mixineket használják, hogy a használatra kész osztályok teljes készletét biztosítsák a gyorsan reagáló elrendezésekhez.
Változók
A változók és a térképek határozzák meg az oszlopok számát, az ereszcsatorna szélességét és azt a médialekérdezési pontot, amelynél a lebegő oszlopok kezdődnek. Ezeket használjuk a fent dokumentált előre definiált grid osztályok létrehozásához, valamint az alább felsorolt egyéni mixinekhez.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mixins
A mixineket a rácsváltozókkal együtt használják szemantikus CSS létrehozására az egyes rácsoszlopokhoz.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Használati példa
Módosíthatja a változókat saját egyéni értékekre, vagy egyszerűen használhatja a mixineket az alapértelmezett értékekkel. Íme egy példa arra, hogyan használhatja az alapértelmezett beállításokat egy kétoszlopos elrendezés létrehozásához, amelyek között rés van.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
A rács testreszabása
A beépített grid Sass változóink és térképeink segítségével lehetőség van az előre meghatározott grid osztályok teljes testreszabására. Módosítsa a szintek számát, a médialekérdezés méreteit és a tároló szélességét, majd fordítsa újra.
Oszlopok és ereszcsatornák
A rácsoszlopok száma Sass változókkal módosítható. $grid-columns
az egyes oszlopok szélességének (százalékban) generálására szolgál, miközben $grid-gutter-width
beállítja az oszlop ereszcsatornáinak szélességét.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Rács szintek
Magukon az oszlopokon túl testreszabhatja a rácsszintek számát is. Ha csak négy rácsszintet szeretne, frissítse a $grid-breakpoints
és $container-max-widths
a következőre:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Ha bármilyen módosítást végez a Sass-változókon vagy leképezéseken, mentenie kell a változtatásokat, és újra kell fordítania. Ezzel egy vadonatúj előre definiált rácsosztály-készletet fog kiadni az oszlopszélességekhez, az eltolásokhoz és a sorrendhez. A reszponzív láthatósági segédprogramok is frissülnek az egyéni töréspontok használatához. Ügyeljen arra, hogy a rácsértékeket beállítsa px
(ne rem
, em
, vagy %
).