in English

Faiga fa'apipi'i

Fa'aoga la matou telefoni feavea'i-muamua flexbox grid e fausia ai fa'ata'ita'iga o foliga ma lapopo'a uma fa'afetai i le koluma e sefululua, lima fa'aletonu tali fa'asaga, Sass fesuia'i ma fa'afefiloi, ma le tele o vasega na mua'i fa'avasegaina.

E faapefea ona galue

E fa'aogaina e le Bootstrap's grid system se fa'asologa o koneteina, laina, ma koluma e fa'atulaga ma fa'aoga mea. E fausia i le flexbox ma e tali atoatoa. O loʻo i lalo se faʻataʻitaʻiga ma se vaʻaiga loloto i le auala e tuʻufaʻatasia ai le faʻasologa.

E fou pe le masani ile flexbox? Faitau lenei CSS Tricks flexbox taiala mo talaaga, upu, taʻiala, ma faʻailoga snippets.

Tasi o koluma e tolu

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

O le fa'ata'ita'iga o lo'o i luga e fa'atupuina ai ni koluma tutusa-lautele se tolu i luga o masini la'ititi, feololo, lapopo'a ma fa'aopoopo e fa'aoga ai a tatou vasega fa'avasega. O na koluma e totonugalemu i le itulau ma le matua .container.

Fa'amavae i lalo, o le auala lenei e galue ai:

O pusa e maua ai se auala e fa'atotonugalemu ma fa'alava fa'alava mea o lo'o i totonu o lau 'upega tafa'ilagi. Fa'aoga .containermo se lautele pika talisa po'o .container-fluidmo width: 100%le va'aiga uma ma le tele o masini.
O laina o afifi mo koluma. O koluma ta'itasi e fa'ata'atia padding(ta'ua o le alavai) mo le fa'atonutonuina o le va i le va. Ona paddingfa'afeagai lea i luga o laina e le lelei pito. I lenei auala, o mea uma i totonu o au koluma o loʻo faʻaogaina i lalo i le itu agavale.
I se fa'asologa o fa'asologa, e tatau ona tu'u mea i totonu o koluma ma na'o koluma e mafai ona avea ma fa'asologa vave o laina.
Fa'afetai i le flexbox, o koluma fa'asologa e aunoa ma se fa'atonuina o le widtha otometi lava ona fa'atulagaina pei o koluma tutusa lautele. Mo se fa'ata'ita'iga, e fa fa'ata'ita'iga o .col-smle a otometi lava ona 25% le lautele mai le va'aiga la'ititi ma luga. Va'ai le vaega o koluma fa'apipi'i-aunoa mo nisi fa'ata'ita'iga.
O vasega koluma e fa'ailoa mai ai le aofa'i o koluma e te mana'o e fa'aoga mai le 12 e mafai ile laina. O lea, afai e te manaʻo i ni koluma tutusa-lautele se tolu, e mafai ona e faʻaogaina .col-4.
O koluma widths e fa'atulaga i pasene, o lea e masani ai ona su'esu'e ma lapopo'a e fa'atatau i le elemene matua.
O koluma e fa'ata'atia paddinge fai ai alavai i le va o koluma ta'itasi, peita'i, e mafai ona e aveese marginmai laina ma paddingmai koluma i .no-guttersluga ole .row.
Ina ia fa'agasolo le fa'asologa, e lima ta'otoga fa'asologa, tasi mo vaega ta'itasi e tali mai ai : va'aiga uma (laiti fa'aopoopo), la'ititi, feololo, lapo'a, ma le lapopo'a.
E fa'avae vaega vaeluaga i luga ole laititi ole lautele ole fa'asalalauga fesili, o lona uiga e fa'aoga ile tasi vaega malepe ma mea uma o lo'o i luga (fa'ata'ita'iga, .col-sm-4fa'aoga i masini la'ititi, feololo, lapoa, ma isi masini tetele, ae le o le xsva'aiga muamua).
E mafai ona e fa'aogaina vasega fa'avasega (pei .col-4) po'o Sass mixins mo le fa'ailoga fa'atusa.

Ia nofouta i tapula'a ma pusi i luga o le flexbox , pei o le le mafai ona fa'aogaina nisi o elemene HTML e fai ma koneteina fe'avea'i .

Grid filifiliga

A'o fa'aogaina e Bootstrap le ems po'o remle s mo le fa'amalamalamaina o le tele o lapopo'a, pxo le s e fa'aoga mo laina vaeluaga ma le lautele o atigipusa. E mafua ona o le lautele o le va'aiga o lo'o i pika ma e le suia i le tele o le vai .

Va'ai pe fa'afefea ona galue vaega o le Bootstrap grid system i le tele o masini ma se laulau fa'aoga.

	Fa'aopoopo la'ititi <576px	Laiti ≥576px	Medium ≥768px	Tele ≥992px	Tele tele ≥1200px
Max ipu lautele lautele	Leai (taavale)	540px	720px	960px	1140px
Ulua'i vasega	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# o koluma	12
Laufanua lautele	30px (15px i itu taʻitasi o se koluma)
Nestable	ioe
Fa'atonu koluma	ioe

Otometi fa'atulagaina koluma

Fa'aoga vasega koluma fa'apitoa mo le fa'avasegaina o koluma e aunoa ma se vasega fa'anumera manino e pei o .col-sm-6.

Tutusa-lautele

Mo se faʻataʻitaʻiga, e lua faʻasologa faʻasologa e faʻaoga i masini uma ma vaʻaiga, mai xsi le xl. Fa'aopoopo so'o se numera o vasega fa'aitiiti iunite mo va'aiga ta'itasi e te mana'omia ma o le a tutusa le lautele o koluma uma.

1 o le 2

2 ole 2

1 o le 3

2 ole 3

3 ole 3

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

E tutusa-lautele laina tele

Fausia koluma tutusa-lautele e vaelua laina se tele e ala i le faʻaofiina o se .w-100mea e te manaʻo e malepe ai koluma i se laina fou. Ia fa'agaoioi le malologa e ala i le fa'afefiloi .w-100ma nisi fa'aoga fa'aaliga tali .

Sa i ai se Safari flexbox bug na taofia ai lenei mea mai le galue e aunoa ma se faʻamatalaga manino flex-basispoʻo border. O lo'o iai fa'afitauli mo su'esu'ega tuai, peita'i e le mana'omia pe a le pa'u atu au su'esu'ega fa'atatau i le fa'aliliuga ta'avale.

col

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

Fa'atulaga tasi koluma lautele

Fa'atonu-aunoa mo koluma flexbox grid o lona uiga e mafai fo'i ona e setiina le lautele o le koluma e tasi ma fa'asolo otometi le fa'avasegaina o koluma fa'atasi. E mafai ona e fa'aogaina vasega fa'avasega (e pei ona fa'aalia i lalo), fa'afefiloi fa'asologa, po'o le lautele o laina. Manatua o isi koluma o le a suia e tusa lava po o le a le lautele o le koluma ogatotonu.

1 o le 3

2 o le 3 (lautele)

3 ole 3

1 o le 3

2 o le 3 (lautele)

3 ole 3

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

Su'esu'ega lautele lautele

Fa'aoga col-{breakpoint}-autovasega e fa'atele koluma e fa'atatau i le lautele fa'anatura o latou anotusi.

1 o le 3

Su'esu'ega lautele lautele

3 ole 3

1 o le 3

Su'esu'ega lautele lautele

3 ole 3

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

Vasega tali atu

O le fa'asologa o Bootstrap e aofia ai vaega e lima o vasega ua uma ona fa'avasegaina mo le fauina o fa'ata'ita'iga lavelave. Fa'apitoa le lapopoa o au koluma i luga o masini fa'aopoopo laiti, la'ititi, feololo, lapo'a, po'o masini tetele e tusa lava pe e te mana'o e fetaui.

Tulaga uma

Mo grids e tutusa mai le laʻititi o masini i le tele, faʻaaoga le .colma .col-*vasega. Fa'ailoa se vasega faanumera pe ae mana'omia se koluma fa'apitoa; a leai, lagona le saoloto e pipii i .col.

col

col-8

col-4

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

Faaputu i le faalava

I le fa'aaogaina o se seti se tasi o .col-sm-*vasega, e mafai ona e faia se faiga fa'avae fa'avae e amata fa'aputu ma fa'alava i le pito la'ititi ( sm).

col-sm-8

col-sm-4

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

Faafefiloi ma fetaui

E te le mana'o e fa'aputu na'o lau koluma i ni vaega fa'asologa? Fa'aaoga se tuufaatasiga o vasega eseese mo vaega ta'itasi pe a mana'omia. Va'ai le fa'ata'ita'iga o lo'o i lalo mo se manatu sili atu pe fa'apefea ona fa'aoga uma.

.col-md-8

.col-6 .col-md-4

.col-6

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

Alavai

E mafai ona fetuutuuna'i ala alavai e ala ile va'aiga fa'apitoa fa'apipi'i ma vasega fa'aoga le lelei. Ina ia sui alavai i se laina tu'ufa'atasi, fa'alua se fa'aoga le lelei i luga ole .rowlaiga ma fa'afetaui mea fa'apipi'i i luga ole .cols. Atonu e mana'omia fo'i ona toe fetu'una'i le matua .containerpo'o .container-fluidle matua ina ia 'alofia ai le so'a mai le mana'omia, toe fa'aogaina le fa'aoga fa'atusa.

O se fa'ata'ita'iga lea o le fa'avasegaina o le fa'asologa o Bootstrap i le va'aiga tele ( lg) ma luga. Ua matou fa'aopoopoina le .colfa'aofuofu i le .px-lg-5, fa'afeagai ma .mx-lg-n5le matua .rowona fa'afetaui lea o le .containerafifi ma le .px-lg-5.

Fa'apipi'i koluma fa'apitoa

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

Koluma laina

Fa'aoga .row-cols-*vasega tali e vave fa'atulaga le numera o koluma e sili ona tu'uina atu lau anotusi ma lau fa'atulagaina. A'o .col-*vasega masani e fa'aoga i koluma ta'itasi (fa'ata'ita'iga, .col-md-4), o vasega koluma laina o lo'o tu'u i le matua .rowe fai ma ala 'alo.

Fa'aoga nei vasega koluma laina e fai vave ai fa'asologa fa'asologa autu po'o le fa'atonutonuina o au fa'ata'otoga kata.

Koluma

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

Koluma

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

Koluma

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

Koluma

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

Koluma

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

E mafai foi ona e faʻaogaina le Sass mixin faʻatasi, 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);
  }
}

Fa'atonuga

Fa'aoga mea fa'aoga fa'aoga flexbox e fa'aoga ai koluma i luga ma fa'alava. Internet Explorer 10-11 e le lagolagoina le fa'aoga sa'o i luga ole mea fa'apipi'i pe a iai le koneteina fe'avea'i e min-heightpei ona fa'aalia i lalo. Va'ai Flexbugs #3 mo nisi fa'amatalaga.

Fa'aoga tu'usa'o

Tasi o koluma e tolu

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

Tasi o koluma e tolu

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

Fa'asagaga fa'asaga

Tasi o koluma e lua

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

Leai ni alavai

O alavai i le va o koluma i totonu oa tatou vasega fa'ata'oto e mafai ona aveese i le .no-gutters. E aveese ai le leaga margins mai .rowma le faalava paddingmai koluma tamaiti uma.

O le fa'ailoga puna lea mo le faia o nei sitaili. Manatua o le fa'asili o koluma e fa'atatau i na'o ulua'i koluma a tamaiti ma o lo'o taula'i e ala i le filifilia o uiga . E ui o lenei mea e maua ai se tagata filifilia sili atu, o le padding koluma e mafai lava ona faʻapipiʻiina i mea faʻaoga avanoa .

Manaomia se mamanu pito-i-pito? Tuu le matua .containerpe .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

I le fa'ata'ita'iga, o le fa'aaliga lea. Manatua e mafai ona e faʻaauau pea ona faʻaogaina lenei mea ma isi vasega faʻasologa uma ua uma ona faʻatulagaina (e aofia ai le lautele o koluma, vaega tali, toe faʻatonu, ma isi mea).

.col-sm-6 .col-md-8

.col-6 .col-md-4

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

afifiina koluma

Afai e sili atu i le 12 koluma e tu'u i totonu o le laina e tasi, o vaega ta'itasi o isi koluma o le a, e tasi le iunite, afifi i se laina fou.

.col-9

.col-4
Talu mai le 9 + 4 = 13 > 12, o le vaega lea e 4-koluma-lautele e afifi i luga o se laina fou o se tasi o iunite soso'o.

.col-6
O koluma mulimuli ane e fa'aauau i luga o le laina fou.

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

Tu'u koluma

O le talepeina o koluma i se laina fou i le flexbox e manaʻomia ai se tamai hack: faʻaopoopo se elemene i width: 100%soʻo se mea e te manaʻo e afifi ai au koluma i se laina fou. E masani lava e ausia lenei mea i le tele o .rows, ae le o metotia faʻatinoga uma e mafai ona faʻamaonia mo lenei mea.

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

E mafai fo'i ona e fa'aogaina lenei malologa i nofoaga fa'apitoa fa'atasi ma a matou fa'aoga fa'aaliga tali .

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

Toe fa'atonu

Oka vasega

Fa'aoga .order-vasega mo le fa'atonutonuina o le fa'atonuga va'aia o au mea. O nei vasega e tali mai, o lea e mafai ai ona e setiina le ordermea e momotu ai (faataitaiga, .order-1.order-md-2). E aofia ai le lagolago 1i 12vaega uma e lima.

Muamua i le DOM, e leai se fa'atonuga na fa'aaogaina

Lua i le DOM, faʻatasi ai ma se faʻatonuga tele

Tolu i le DOM, faʻatasi ai ma se faʻatonuga o le 1

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

E i ai fo'i tali .order-firstma .order-lastvasega e suia ai le orderelemene e ala i le fa'aogaina order: -1ma le order: 13( order: $columns + 1), i le faasologa. O nei vasega e mafai fo'i ona fa'afefiloi ma .order-*vasega fa'anumera pe a mana'omia.

Muamua i le DOM, fa'atonu mulimuli

Lua i le DOM, le fa'atonuina

Tolu i le DOM, fa'atonu muamua

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

Fa'ase'e koluma

E mafai ona e fa'asili koluma fa'asologa i ni auala se lua: matou .offset-vasega fa'avasega tali ma a matou mea fa'aoga pito i tua . O vasega fa'ava'a e fa'atutusa e fa'afetaui koluma a'o pito e sili atu ona aoga mo fa'ata'ita'iga vave e fesuia'i ai le lautele o le offset.

Offset vasega

Fa'asolo koluma i le itu taumatau e fa'aoga ai .offset-md-*vasega. O nei vasega e fa'ateleina le pito agavale o se koluma i *koluma. Mo se fa'ata'ita'iga, .offset-md-4fa'agaoioi .col-md-4luga o koluma e fa.

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

I le faaopoopo atu i le kiliaina o koluma i nofoaga malolo tali, atonu e te manaʻomia le toe setiina offsets. Va'ai i le fa'atinoga i le fa'ata'ita'iga fa'asologa .

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

Fa'aoga pito i tua

Faatasi ai ma le siitia atu i le flexbox i le v4, e mafai ona e faʻaogaina mea faʻaoga faʻapitoa e pei .mr-autoo le faʻamalosi o nai koluma mai le isi.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Faamoega

Ina ia fa'aputu au mea i le fa'asologa fa'aletonu, fa'aopoopo se seti fou .rowma se seti o .col-sm-*koluma i totonu ole .col-sm-*koluma o iai. O laina fa'aputu e tatau ona aofia ai se seti o koluma e fa'aopoopo i le 12 pe itiiti ifo (e le mana'omia lou fa'aogaina uma o koluma e 12 o lo'o avanoa).

Laasaga 1: .col-sm-9

Laasaga 2: .col-8 .col-sm-6

Laasaga 2: .col-4 .col-sm-6

<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 fa'aogaina faila Sass fa'apogai a Bootstrap, o lo'o ia te oe le filifiliga e fa'aoga ai suiga ma fa'afefiloi Sass e fatu ai fa'asologa o tu ma aga, fa'asinomaga, ma fa'asologa o itulau. O a matou vasega fa'ata'ita'i fa'avasega e fa'aogaina nei lava fesuiaiga ma fa'afefiloi e tu'uina atu ai se vaega atoa o vasega sauni e fa'aoga mo fa'atonuga vave tali mai.

Fuafuaga

Fuafuaga ma faafanua e fuafua ai le numera o koluma, le lautele o le alavai, ma le vaega o fesili a le aufaasālalau lea e amata ai koluma opeopea. Matou te fa'aogaina nei mea e fa'atupuina ai vasega fa'asologa o lo'o fa'amauina i luga, fa'apea fo'i ma fa'afefiloi masani o lo'o lisi atu i lalo.

$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

Fa'afefiloi e fa'aoga fa'atasi ma le fa'asologa o fesuiaiga e fa'atupu ai le CSS semantic mo koluma fa'asologa ta'itasi.

// 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);

Fa'ata'ita'iga fa'aoga

E mafai ona e fesuia'i suiga i au lava tulaga fa'ale-aganu'u, pe na'o le fa'aogaina o mea fa'afefiloi ma latou tau fa'aletonu. O se fa'ata'ita'iga lea o le fa'aogaina o tulaga fa'aletonu e fai ai se fa'asologa o koluma e lua ma se va i le va.

.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);
  }
}

Anotusi autu

Anotusi lona lua

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

Fa'avasega le fa'asologa

I le fa'aogaina o la matou fa'asologa Sass fesuiaiga ma fa'afanua, e mafai ona fa'avasega atoatoa vasega fa'avasega. Suia le numera o vaega, le tele o fesili a le aufaasālalau, ma le lautele o koneteina—ona toe tuufaatasia lea.

Koluma ma alavai

Ole numera o koluma fa'asologa e mafai ona suia e ala i fesuiaiga Sass. $grid-columnse fa'aaogaina e fa'atupu ai le lautele (i le pasene) o koluma ta'itasi a'o $grid-gutter-widthfa'atulaga le lautele mo alavai o koluma.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Fa'asologa o laina

O le aga'i atu i tua atu o koluma lava latou, e mafai fo'i ona e fa'avasegaina le numera o fa'asologa fa'asologa. Afai e te mana'o na'o le fa laina fa'asologa, e te fa'afouina le $grid-breakpointsma $container-max-widthsi se mea fa'apenei:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

A fai so'o se suiga i le Sass fesuia'i po'o fa'afanua, e tatau ona e fa'asaoina au suiga ma toe fa'aopoopo. O le faia o lea mea o le a maua ai se seti fou o vasega fa'avasega fa'asologa mo le lautele o koluma, fa'asili, ma le fa'atonuga. O le a fa'afouina fo'i mea faigaluega fa'aalia e tali atu e fa'aoga ai fa'aputuga masani. Ia mautinoa e seti fa'asologa fa'atatau ile px(e le rem, em, po'o le %).