Sistem grilă
Folosiți grila noastră puternică flexbox pentru mobil pentru a construi machete de toate formele și dimensiunile datorită unui sistem cu douăsprezece coloane, cinci niveluri receptive implicite, variabile și mixuri Sass și zeci de clase predefinite.
Cum functioneaza
Sistemul de grilă Bootstrap folosește o serie de containere, rânduri și coloane pentru a dispune și alinia conținutul. Este construit cu flexbox și este complet receptiv. Mai jos este un exemplu și o privire în profunzime asupra modului în care se reunește grila.
Nou sau nu sunteți familiarizat cu Flexbox? Citiți acest ghid CSS Tricks flexbox pentru fundal, terminologie, linii directoare și fragmente de cod.
<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>
Exemplul de mai sus creează trei coloane cu lățime egală pe dispozitive mici, medii, mari și foarte mari folosind clasele noastre de grilă predefinite. Aceste coloane sunt centrate în pagina cu părintele .container
.
Defalcând-o, iată cum funcționează:
- Containerele oferă un mijloc de a centra și de a completa orizontal conținutul site-ului dvs. Utilizați
.container
pentru o lățime a pixelilor receptivi sau.container-fluid
pentruwidth: 100%
toate dimensiunile de ferestre și dispozitive. - Rândurile sunt învelișuri pentru coloane. Fiecare coloană are orizontală
padding
(numită jgheab) pentru controlul spațiului dintre ele. Acest lucrupadding
este apoi contracarat pe rândurile cu margini negative. În acest fel, tot conținutul din coloanele dvs. este aliniat vizual în partea stângă. - Într-un aspect cu grilă, conținutul trebuie plasat în coloane și numai coloanele pot fi copii imediati ai rândurilor.
- Datorită flexbox, coloanele de grilă fără o specificație
width
vor dispune automat ca coloane cu lățime egală. De exemplu, patru instanțe de.col-sm
vor avea fiecare automat o lățime de 25% de la punctul de întrerupere mic și în sus. Consultați secțiunea coloane cu aspect automat pentru mai multe exemple. - Clasele de coloane indică numărul de coloane pe care doriți să le utilizați din cele 12 posibile pe rând. Deci, dacă doriți trei coloane de lățime egală, puteți utiliza
.col-4
. - Coloanele
width
sunt setate în procente, deci sunt întotdeauna fluide și dimensionate în raport cu elementul lor părinte. - Coloanele au orizontale
padding
pentru a crea jgheaburi între coloanele individuale, cu toate acestea, puteți eliminamargin
din rânduri șipadding
din coloane cu.no-gutters
pe.row
. - Pentru ca grila să răspundă, există cinci puncte de întrerupere a grilei, câte unul pentru fiecare punct de întrerupere receptiv : toate punctele de întrerupere (foarte mici), mici, medii, mari și foarte mari.
- Punctele de întrerupere ale grilei se bazează pe interogări media cu lățime minimă, adică se aplică aceluia punct de întrerupere și tuturor celor de deasupra acestuia (de exemplu,
.col-sm-4
se aplică dispozitivelor mici, medii, mari și foarte mari, dar nu și primului punct dexs
întrerupere). - Puteți utiliza clase de grilă predefinite (cum ar fi
.col-4
) sau mix- uri Sass pentru un marcaj mai semantic.
Fiți conștienți de limitările și erorile din jurul flexbox , cum ar fi incapacitatea de a utiliza unele elemente HTML ca containere flexibile .
Opțiuni de grilă
În timp ce Bootstrap folosește em
s sau rem
s pentru a defini majoritatea dimensiunilor, px
s-urile sunt folosite pentru punctele de întrerupere a grilei și lățimile containerului. Acest lucru se datorează faptului că lățimea ferestrei de vizualizare este în pixeli și nu se modifică odată cu dimensiunea fontului .
Vedeți cum funcționează aspectele sistemului de grilă Bootstrap pe mai multe dispozitive cu un tabel la îndemână.
Foarte mic <576px |
Mic ≥576px |
Mediu ≥768px |
Mare ≥992px |
Foarte mare ≥1200px |
|
---|---|---|---|---|---|
Lățimea maximă a containerului | Niciuna (auto) | 540px | 720px | 960px | 1140px |
Prefixul clasei | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# de coloane | 12 | ||||
Latimea jgheabului | 30px (15px pe fiecare parte a unei coloane) | ||||
Încadrabil | da | ||||
Ordinea coloanelor | da |
Coloane cu aspect automat
Utilizați clase de coloane specifice punctului de întrerupere pentru o dimensionare ușoară a coloanei fără o clasă numerotată explicită, cum ar fi .col-sm-6
.
Latime egala
De exemplu, iată două modele de grilă care se aplică fiecărui dispozitiv și fereastra de vizualizare, de la xs
până la xl
. Adăugați orice număr de clase fără unități pentru fiecare punct de întrerupere de care aveți nevoie și fiecare coloană va avea aceeași lățime.
<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>
Multi-linie cu lățime egală
Creați coloane cu lățime egală care se întind pe mai multe linii inserând un .w-100
loc unde doriți ca coloanele să se despartă la o nouă linie. Faceți pauzele receptive amestecând .w-100
cu unele utilitare de afișare receptive .
A existat o eroare Safari flexbox care a împiedicat acest lucru să funcționeze fără un mesaj explicit flex-basis
sau border
. Există soluții pentru versiunile mai vechi de browser, dar acestea nu ar trebui să fie necesare dacă browserele țintă nu se încadrează în versiunile cu erori.
<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>
Setarea unei lățimi a coloanei
Așezarea automată pentru coloanele de grilă Flexbox înseamnă, de asemenea, că puteți seta lățimea unei coloane și că coloanele frate sunt redimensionate automat în jurul acesteia. Puteți utiliza clase de grilă predefinite (după cum se arată mai jos), mixuri de grile sau lățimi în linie. Rețineți că celelalte coloane se vor redimensiona indiferent de lățimea coloanei centrale.
<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>
Conținut cu lățime variabilă
Utilizați col-{breakpoint}-auto
clase pentru a dimensiona coloanele în funcție de lățimea naturală a conținutului lor.
<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>
Clase receptive
Grila Bootstrap include cinci niveluri de clase predefinite pentru construirea de layout-uri receptive complexe. Personalizați dimensiunea coloanelor dvs. pe dispozitive foarte mici, mici, medii, mari sau foarte mari, după cum doriți.
Toate punctele de întrerupere
Pentru grile care sunt aceleași de la cel mai mic dispozitiv la cel mai mare, utilizați clasele .col
și . .col-*
Specificați o clasă numerotată atunci când aveți nevoie de o coloană de dimensiuni deosebite; în caz contrar, nu ezitați să rămâneți la .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>
Stivuite la orizontală
Folosind un singur set de .col-sm-*
clase, puteți crea un sistem de grilă de bază care începe stivuit și devine orizontal la punctul mic de întrerupere ( 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>
Se amestecă și se potrivesc
Nu doriți ca coloanele dvs. să fie pur și simplu stivuite în niște niveluri de grilă? Utilizați o combinație de clase diferite pentru fiecare nivel, după cum este necesar. Consultați exemplul de mai jos pentru o idee mai bună despre cum funcționează totul.
<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>
Jgheaburi
Jgheaburile pot fi ajustate în mod receptiv prin umplutură specifică punctului de întrerupere și clase de utilitate cu marjă negativă. Pentru a schimba jgheaburile dintr-un rând dat, împerecheați un utilitar de marjă negativă pe utilitățile de .row
umplutură potrivite pe .col
s. Este posibil ca .container
și .container-fluid
părintele să fie ajustat pentru a evita depășirea nedorită, folosind din nou utilitarul de umplutură potrivit.
Iată un exemplu de personalizare a grilei Bootstrap la punctul de lg
întrerupere mare ( ) și mai sus. Am mărit .col
căptușeala cu .px-lg-5
, am contracarat-o cu .mx-lg-n5
pe părinte .row
și apoi am ajustat .container
învelișul cu .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>
Coloane de rând
Utilizați .row-cols-*
clasele responsive pentru a seta rapid numărul de coloane care redă cel mai bine conținutul și aspectul dvs. În timp ce clasele normale .col-*
se aplică coloanelor individuale (de exemplu, .col-md-4
), clasele coloanelor de rând sunt setate pe părinte .row
ca o comandă rapidă.
Utilizați aceste clase de coloane de rând pentru a crea rapid machete de bază ale grilei sau pentru a vă controla aspectele cardurilor.
<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>
De asemenea, puteți folosi mixin-ul Sass însoțitor 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);
}
}
Aliniere
Utilizați utilitarele de aliniere flexbox pentru a alinia vertical și orizontal coloanele. Internet Explorer 10-11 nu acceptă alinierea verticală a elementelor flexibile atunci când containerul flexibil are un min-height
ca în imaginea de mai jos. Consultați Flexbugs #3 pentru mai multe detalii.
Aliniere verticală
<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>
Aliniere orizontala
<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>
Fără jgheaburi
Jgheaburile dintre coloane din clasele noastre de grile predefinite pot fi eliminate cu .no-gutters
. Acest lucru elimină surile negative margin
din .row
și orizontalul padding
din toate coloanele secundare imediate.
Iată codul sursă pentru crearea acestor stiluri. Rețineți că suprascrierile de coloane se limitează la primele coloane secundare și sunt vizate prin selectorul de atribute . Deși acest lucru generează un selector mai specific, umplutura coloanei poate fi personalizată în continuare cu utilități de spațiere .
Ai nevoie de un design de la margine la margine? Aruncă părintele .container
sau .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
În practică, iată cum arată. Rețineți că puteți continua să utilizați acest lucru cu toate celelalte clase de grilă predefinite (inclusiv lățimi de coloane, niveluri receptive, reordonări și multe altele).
<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>
Înfășurarea coloanei
Dacă mai mult de 12 coloane sunt plasate într-un singur rând, fiecare grup de coloane suplimentare se va încheia, ca o singură unitate, pe o nouă linie.
Deoarece 9 + 4 = 13 > 12, această div pe 4 coloane este înfășurată pe o nouă linie ca o unitate contigue.
Coloanele ulterioare continuă de-a lungul noii linii.
<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>
Rupe de coloană
Spărgerea coloanelor într-o nouă linie în flexbox necesită un mic hack: adăugați un element cu width: 100%
oriunde doriți să înfășurați coloanele la o nouă linie. În mod normal, acest lucru se realizează cu mai multe .row
s, dar nu orice metodă de implementare poate explica acest lucru.
<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>
De asemenea, puteți aplica această pauză la anumite puncte de întrerupere cu utilitatile noastre de afișare receptive .
<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>
Reordonare
Comanda cursuri
Utilizați .order-
clase pentru a controla ordinea vizuală a conținutului dvs. Aceste clase sunt receptive, așa că puteți seta punctul order
de întrerupere (de exemplu, .order-1.order-md-2
). Include suport pentru 1
toate 12
cele cinci niveluri de grilă.
<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>
Există, de asemenea , clase responsive .order-first
și care schimbă caracterul unui element prin aplicarea și respectiv ( ). Aceste clase pot fi, de asemenea, amestecate cu clasele numerotate după cum este necesar..order-last
order
order: -1
order: 13
order: $columns + 1
.order-*
<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>
Coloane compensate
Puteți compensa coloanele de grilă în două moduri: .offset-
clasele noastre de grilă receptive și utilitățile noastre de marjă . Clasele de grilă sunt dimensionate pentru a se potrivi coloanelor, în timp ce marginile sunt mai utile pentru layout-uri rapide în care lățimea decalajului este variabilă.
Clasele offset
Mutați coloanele la dreapta folosind .offset-md-*
clase. Aceste clase măresc marginea stângă a unei coloane cu *
coloane. De exemplu, .offset-md-4
se deplasează .col-md-4
pe patru coloane.
<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>
Pe lângă ștergerea coloanelor la punctele de întrerupere receptive, poate fi necesar să resetați decalajele. Vedeți acest lucru în acțiune în exemplul de grilă .
<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>
Utilități de marjă
Odată cu trecerea la flexbox în v4, puteți utiliza utilități de marjă, cum ar fi .mr-auto
să forțați coloanele frate la distanță una de alta.
<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>
Cuibărire
Pentru a vă îngloba conținutul cu grila implicită, adăugați un nou .row
și un set de .col-sm-*
coloane într-o .col-sm-*
coloană existentă. Rândurile imbricate ar trebui să includă un set de coloane care se adună până la 12 sau mai puțin (nu este necesar să utilizați toate cele 12 coloane disponibile).
<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
Când utilizați fișierele Sass sursă ale Bootstrap, aveți opțiunea de a utiliza variabile și mixuri Sass pentru a crea machete de pagină personalizate, semantice și receptive. Clasele noastre de grilă predefinite folosesc aceleași variabile și mixuri pentru a oferi o suită întreagă de clase gata de utilizare pentru layout-uri cu răspuns rapid.
Variabile
Variabilele și hărțile determină numărul de coloane, lățimea jgheabului și punctul de interogare media la care să înceapă coloanele plutitoare. Le folosim pentru a genera clasele de grilă predefinite documentate mai sus, precum și pentru mixurile personalizate enumerate mai jos.
$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
);
Mixine
Mixinele sunt utilizate împreună cu variabilele grilei pentru a genera CSS semantic pentru coloanele de grilă individuale.
// 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);
Exemplu de utilizare
Puteți modifica variabilele la propriile valori personalizate sau pur și simplu utilizați mixin-urile cu valorile lor implicite. Iată un exemplu de utilizare a setărilor implicite pentru a crea un aspect cu două coloane cu un decalaj între.
.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>
Personalizarea grilei
Folosind variabilele și hărțile Sass ale grilei noastre încorporate, este posibil să personalizați complet clasele de grilă predefinite. Modificați numărul de niveluri, dimensiunile interogării media și lățimile containerului, apoi recompilați.
Coloane și jgheaburi
Numărul de coloane de grilă poate fi modificat prin variabilele Sass. $grid-columns
este folosit pentru a genera lățimile (în procente) ale fiecărei coloane individuale, în timp ce $grid-gutter-width
setează lățimea pentru jgheaburile coloanei.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Niveluri de grilă
Trecând dincolo de coloanele în sine, puteți personaliza și numărul de niveluri de grilă. Dacă doriți doar patru niveluri de grilă, ați actualiza $grid-breakpoints
și $container-max-widths
la ceva de genul acesta:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Când faceți modificări ale variabilelor sau hărților Sass, va trebui să salvați modificările și să le recompilați. Procedând astfel, se va afișa un nou set de clase de grilă predefinite pentru lățimi, decalaje și ordine ale coloanelor. Utilitarele de vizibilitate receptive vor fi, de asemenea, actualizate pentru a utiliza punctele de întrerupere personalizate. Asigurați-vă că setați valorile grilei în px
(nu rem
, em
, sau %
).