Mrežni sistem
Upotrijebite našu moćnu flexbox mrežu koja je na prvom mjestu za mobilne uređaje da biste izgradili rasporede svih oblika i veličina zahvaljujući sistemu od dvanaest stupaca, pet zadanih responzivnih nivoa, Sass varijablama i miksinama i desetinama unaprijed definiranih klasa.
Kako radi
Bootstrap-ov grid sistem koristi niz kontejnera, redova i kolona za raspored i poravnanje sadržaja. Napravljen je sa flexboxom i potpuno je prilagodljiv. Ispod je primjer i detaljan pogled na to kako se mreža spaja.
Novi ste ili niste upoznati sa flexboxom? Pročitajte ovaj Flexbox vodič za CSS Tricks za pozadinu, terminologiju, smjernice i isječke koda.
<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>
Gornji primjer kreira tri kolone jednake širine na malim, srednjim, velikim i ekstra velikim uređajima koristeći naše unaprijed definirane klase mreže. Ti stupci su centrirani na stranici s roditeljem .container
.
Ako ga rastavite, evo kako to funkcionira:
- Kontejneri pružaju način za centriranje i vodoravno postavljanje sadržaja vaše stranice. Koristite
.container
za responzivnu širinu piksela ili.container-fluid
zawidth: 100%
sve veličine prozora i uređaja. - Redovi su omoti za kolone. Svaki stupac ima horizontalni
padding
(koji se naziva žlijeb) za kontrolu prostora između njih. Topadding
se onda suprotstavlja na redovima s negativnim marginama. Na ovaj način, sav sadržaj u vašim kolonama je vizuelno poravnat na lijevoj strani. - U rasporedu mreže, sadržaj mora biti smješten unutar kolona i samo stupci mogu biti neposredno podređeni redovima.
- Zahvaljujući flexboxu, kolone mreže bez specificiranog
width
će automatski biti postavljene kao kolone jednake širine. Na primjer, četiri instance.col-sm
će automatski biti po 25% široke od male točke prekida i više. Za više primjera pogledajte odjeljak kolona sa automatskim rasporedom . - Klase kolona označavaju broj kolona koje želite koristiti od mogućih 12 po redu. Dakle, ako želite tri kolone jednake širine, možete koristiti
.col-4
. - Kolone
width
s su postavljene u procentima, tako da su uvijek fluidne i veličine u odnosu na njihov roditeljski element. - Kolone su horizontalne
padding
za stvaranje oluka između pojedinačnih kolona, međutim, možete uklonitimargin
iz redova ipadding
iz kolona sa.no-gutters
na.row
. - Da bi mreža bila prilagodljiva, postoji pet prelomnih tačaka mreže, po jedna za svaku tačku prekida : sve tačke prekida (ekstra male), male, srednje, velike i ekstra velike.
- Prelomne tačke mreže su zasnovane na medijskim upitima minimalne širine, što znači da se primenjuju na tu jednu tačku prekida i sve one iznad nje (npr.
.col-sm-4
primenjuju se na male, srednje, velike i ekstra velike uređaje, ali ne i na prvuxs
tačku prekida). - Možete koristiti unaprijed definirane klase mreže (poput
.col-4
) ili Sass miksine za više semantičkog označavanja.
Budite svjesni ograničenja i grešaka oko flexbox-a , poput nemogućnosti korištenja nekih HTML elemenata kao flex kontejnera .
Opcije mreže
Dok Bootstrap koristi em
s ili rem
s za definiranje većine veličina, px
s se koristi za prelomne tačke mreže i širine kontejnera. To je zato što je širina okvira za prikaz u pikselima i ne mijenja se s veličinom fonta .
Pogledajte kako aspekti Bootstrap grid sistema funkcionišu na više uređaja uz praktičnu tablicu.
Izuzetno mali <576px |
Mala ≥576px |
Srednje ≥768px |
Velika ≥992px |
Ekstra velika ≥1200px |
|
---|---|---|---|---|---|
Maksimalna širina kontejnera | Ništa (auto) | 540px | 720px | 960px | 1140px |
Prefiks klase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Broj kolona | 12 | ||||
Širina oluka | 30px (15px sa svake strane kolone) | ||||
Nestable | Da | ||||
Redosled kolona | Da |
Automatski raspored kolona
Koristite klase stupaca specifične za tačku prekida za jednostavno određivanje veličine stupaca bez eksplicitne numerisane klase kao što je .col-sm-6
.
Jednake širine
Na primjer, evo dva rasporeda mreže koja se primjenjuju na svaki uređaj i okvir za prikaz, od xs
do xl
. Dodajte bilo koji broj klasa bez jedinica za svaku tačku prekida koja vam je potrebna i svaki stupac će biti iste širine.
<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>
Višelinijski jednake širine
Kreirajte kolone jednake širine koji se protežu na više redova tako što ćete umetnuti a .w-100
gdje želite da se stupci razdvoje na novi red. Učinite pauze responzivnim miješanjem .w-100
s nekim uslužnim programima za prikaz .
Postojala je greška Safari flexbox koja je spriječila ovo da radi bez eksplicitnog flex-basis
ili border
. Postoje zaobilazna rješenja za starije verzije pretraživača, ali ona ne bi trebala biti potrebna ako vaši ciljni pretraživači ne spadaju u verzije sa greškama.
<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>
Postavljanje širine jedne kolone
Automatski raspored za kolone flexbox mreže takođe znači da možete postaviti širinu jedne kolone i da se srodnim kolonama automatski menja veličina oko nje. Možete koristiti unapred definisane klase mreže (kao što je prikazano ispod), mešavine mreže ili inline širine. Imajte na umu da će se veličina ostalih kolona promijeniti bez obzira na širinu središnje kolone.
<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>
Sadržaj promjenjive širine
Koristite col-{breakpoint}-auto
klase za veličinu kolona na osnovu prirodne širine njihovog sadržaja.
<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>
Responsive classes
Bootstrap mreža uključuje pet nivoa unapred definisanih klasa za izgradnju složenih responzivnih izgleda. Prilagodite veličinu svojih stupaca na izuzetno malim, malim, srednjim, velikim ili ekstra velikim uređajima kako god smatrate prikladnim.
Sve tačke prekida
Za mreže koje su iste od najmanjeg uređaja do najvećeg, koristite .col
i .col-*
klase. Odredite numerisanu klasu kada vam je potrebna kolona posebne veličine; inače, slobodno se držite .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>
Naslagano do horizontale
Koristeći jedan skup .col-sm-*
klasa, možete kreirati osnovni sistem mreže koji počinje naslagano i postaje horizontalan na maloj tački prekida ( 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>
Pomiješajte i spojite
Ne želite da se vaše kolone jednostavno slažu u nekoliko slojeva mreže? Koristite kombinaciju različitih klasa za svaki nivo po potrebi. Pogledajte primjer u nastavku za bolju ideju kako sve to funkcionira.
<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>
Oluci
Oluci se mogu prilagodljivo podesiti pomoću dopuna specifičnih za tačku prekida i klasa korisnosti negativne margine. Da biste promijenili oluke u datom redu, uparite negativnu marginu uslužnog programa na .row
i odgovarajuće pomoćne programe za popunjavanje na .col
s. .container
Ili će možda morati da se podesi i .container-fluid
roditelj da bi se izbeglo neželjeno prelivanje, koristeći ponovo odgovarajući uslužni program za popunjavanje.
Evo primjera prilagođavanja Bootstrap mreže na velikoj ( lg
) tački prekida i iznad. Povećali smo .col
padding sa .px-lg-5
, suprotstavili se tome sa .mx-lg-n5
na roditelju .row
, a zatim smo podesili .container
omot sa .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>
Red kolone
Koristite responzivne .row-cols-*
klase da brzo postavite broj kolona koje najbolje prikazuju vaš sadržaj i izgled. Dok se normalne .col-*
klase primenjuju na pojedinačne kolone (npr. .col-md-4
), klase kolona reda se postavljaju na roditelju .row
kao prečica.
Koristite ove klase stupaca reda za brzo kreiranje osnovnih rasporeda mreže ili za kontrolu izgleda vaših kartica.
<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>
Možete koristiti i prateći Sass mixin, 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);
}
}
Poravnanje
Koristite uslužne programe za poravnanje flexboxa za vertikalno i horizontalno poravnanje stupaca. Internet Explorer 10-11 ne podržava vertikalno poravnanje flex stavki kada flex kontejner ima a min-height
kao što je prikazano ispod. Pogledajte Flexbugs #3 za više detalja.
Vertikalno poravnanje
<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>
Horizontalno poravnanje
<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>
Nema oluka
Oluci između stupaca u našim predefiniranim mrežnim klasama mogu se ukloniti pomoću .no-gutters
. Ovo uklanja negativne margin
s .row
i horizontale padding
iz svih neposrednih podređenih stupaca.
Evo izvornog koda za kreiranje ovih stilova. Imajte na umu da su nadjačavanja stupaca ograničena na samo prve podređene stupce i ciljana su preko selektora atributa . Iako ovo generiše specifičniji selektor, dopuna kolone se i dalje može dodatno prilagoditi pomoću uslužnih programa za razmak .
Trebate dizajn od ruba do ivice? Odbacite roditelja .container
ili .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
U praksi, evo kako to izgleda. Imajte na umu da ovo možete nastaviti da koristite sa svim drugim unapred definisanim klasama mreže (uključujući širine kolona, responzivne slojeve, promene redosleda i još mnogo toga).
<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>
Omotavanje kolone
Ako je više od 12 kolona postavljeno unutar jednog reda, svaka grupa dodatnih kolona će se, kao jedna jedinica, premotati u novi red.
Pošto je 9 + 4 = 13 > 12, ovaj div širine 4 kolone se umotava u novi red kao jedna susedna jedinica.
Naredne kolone se nastavljaju duž novog reda.
<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>
Prelomi kolona
Razbijanje kolona u novi red u flexbox-u zahtijeva mali hak: dodajte element width: 100%
gdje god želite da premotate svoje kolone u novi red. Obično se to postiže s višestrukim .row
s, ali ne može svaka metoda implementacije to uzeti u obzir.
<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>
Ovu pauzu možete primijeniti i na određenim prijelomnim tačkama s našim responzivnim uslužnim programima za prikaz .
<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>
Preuređivanje
Naručite časove
Koristite .order-
klase za kontrolu vizuelnog reda vašeg sadržaja. Ove klase su responzivne, tako da možete postaviti order
točku prekida (npr. .order-1.order-md-2
). Uključuje podršku za 1
kroz 12
svih pet nivoa mreže.
<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>
Postoje i responsive .order-first
i .order-last
klase koje mijenjaju order
element primjenom order: -1
i order: 13
( order: $columns + 1
), respektivno. Ove klase se takođe mogu mešati sa numerisanim .order-*
klasama po potrebi.
<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>
Offseting kolone
Možete pomaknuti stupce mreže na dva načina: naše responzivne .offset-
mrežne klase i naše margine . Mrežne klase su veličine tako da odgovaraju kolonama, dok su margine korisnije za brze izglede gdje je širina pomaka promjenjiva.
Offset klase
Pomjerite stupce udesno koristeći .offset-md-*
klase. Ove klase povećavaju lijevu marginu kolone po *
kolone. Na primjer, .offset-md-4
kreće se .col-md-4
preko četiri kolone.
<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>
Pored brisanja kolona na odgovarajućim prijelomnim tačkama, možda ćete morati resetirati pomake. Pogledajte ovo na djelu u primjeru mreže .
<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 komunalne usluge
Sa prelaskom na flexbox u v4, možete koristiti marginalne uslužne programe kao što .mr-auto
je prisilno udaljavanje srodnih stupaca jedan od drugog.
<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>
Nesting
Da biste svoj sadržaj ugnijezdili u zadanu mrežu, dodajte novu .row
i skup .col-sm-*
kolona unutar postojeće .col-sm-*
kolone. Ugniježđeni redovi bi trebali uključivati skup kolona koji zajedno čine 12 ili manje (nije potrebno da koristite svih 12 dostupnih kolona).
<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
Kada koristite izvorne Sass datoteke Bootstrapa, imate mogućnost korištenja Sass varijabli i miksina za kreiranje prilagođenih, semantičkih i responzivnih izgleda stranica. Naše predefinirane mrežne klase koriste iste varijable i miksine kako bi pružile cijeli paket klasa spremnih za korištenje za brzo reagiranje izgleda.
Varijable
Varijable i mape određuju broj kolona, širinu žlijeba i tačku medijskog upita u kojoj će početi plutajuće kolone. Koristimo ih za generiranje unaprijed definiranih grid klasa koje su gore dokumentirane, kao i za prilagođene miksine navedene u nastavku.
$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
Miksini se koriste zajedno sa varijablama mreže za generiranje semantičkog CSS-a za pojedinačne stupce mreže.
// 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);
Primjer upotrebe
Možete modificirati varijable na svoje vlastite prilagođene vrijednosti ili jednostavno koristiti miksine sa njihovim zadanim vrijednostima. Evo primjera korištenja zadanih postavki za kreiranje rasporeda s dvije kolone s razmakom između.
.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>
Prilagođavanje mreže
Koristeći naše ugrađene grid Sass varijable i mape, moguće je potpuno prilagoditi unaprijed definirane mrežne klase. Promijenite broj slojeva, dimenzije medijskog upita i širine kontejnera - a zatim ponovo kompajlirajte.
Stubovi i oluci
Broj stupaca mreže može se mijenjati preko Sass varijabli. $grid-columns
koristi se za generiranje širine (u procentima) svake pojedinačne kolone dok $grid-gutter-width
postavlja širinu za oluke stupaca.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Mrežni slojevi
Idući dalje od samih kolona, možete prilagoditi i broj slojeva mreže. Ako želite samo četiri nivoa mreže, ažurirali biste $grid-breakpoints
i $container-max-widths
na nešto poput ovoga:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Kada pravite bilo kakve promjene u Sass varijablama ili mapama, morat ćete sačuvati promjene i ponovo kompajlirati. Na taj način će se dobiti potpuno novi skup unaprijed definiranih klasa mreže za širine stupaca, pomake i redoslijed. Ažurirani uslužni programi za vidljivost će također biti ažurirani da koriste prilagođene tačke prekida. Obavezno postavite vrijednosti mreže u px
(ne rem
, em
, ili %
).