Source

Pūnaha mātiti

Whakamahia ta maatau matiti pouaka-a-rorohiko tuatahi ki te hanga tahora o nga ahua me nga rahi katoa na te punaha pou tekau ma rua, e rima nga taumata whakautu taunoa, nga taurangi Sass me nga ranunga, me nga karaehe kua tautuhia.

Pehea te mahi

Ka whakamahia e te punaha matiti a Bootstrap he raupapa ipu, rarangi, me nga pou hei tahora me te whakatiaro i nga ihirangi. He mea hanga ki te flexbox me te tino aro. Kei raro nei he tauira me te titiro hohonu ki te whakakotahitanga o te matiti.

He hou, he tauhou ranei ki te flexbox? Pānuihia tenei CSS Tricks flexbox aratohu mo te papamuri, nga kupu, nga aratohu, me nga waahanga waehere.

Ko tetahi o nga pou e toru

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

Ko te tauira i runga ake nei ka hanga e toru nga pou rite-whanui i runga i nga taputapu iti, waenga, rahi, nui atu ma te whakamahi i o maatau karaehe matiti kua tautuhia. Ko aua pou kei waenganui i te wharangi me te matua .container.

Ko te wawahi, koinei te mahi:

Ka whakaratohia e nga ipu he huarahi ki te whakauru me te whakakii whakapae i nga ihirangi o to pae. Whakamahia .containermo te whanui pika aro, .container-fluidmo width: 100%te tauranga tirohanga katoa me nga rahi taputapu.
He takai nga rarangi mo nga pou. Kei ia pou he whakapae padding(e kiia ana he awaawa) hei whakahaere i te mokowhiti i waenganui. Ka paddingwhakaekea tenei ki nga rarangi me nga tawhē kino. Ma tenei ara, ko nga mea katoa kei roto i o pou ka tirohia ki te taha maui.
I roto i te tahora matiti, me whakauru nga ihirangi ki roto i nga pou, ko nga pou anake pea he tamariki tonu o nga rarangi.
He mihi ki te flexbox, ko nga pou matiti karekau he tohu widthka tahora aunoa hei pou whanui rite. Hei tauira, e wha nga waahanga .col-smka 25% te whanui mai i te waahi iti me te piki ake. Tirohia te wahanga tahora-aunoa nga pou mo etahi atu tauira.
Ka tohuhia e nga karaehe pou te maha o nga pou e hiahia ana koe ki te whakamahi mai i te 12 ka taea mo ia rarangi. Na, ki te hiahia koe kia toru nga pou rite-whanui puta noa, ka taea e koe te whakamahi .col-4.
Kua tautuhia widthnga rarangi ki nga pahekeheke, no reira he wai me te rahi o nga wa katoa e pa ana ki o raatau matua.
Ko nga pou he whakapae paddinghei hanga i nga awaawa i waenga i nga pou takitahi, heoi, ka taea e koe te tango marginmai i nga rarangi me paddingnga pou kei .no-guttersrunga i te .row.
Kia aro mai te matiti, e rima nga waahi wehenga matiti, kotahi mo ia waahanga wehenga urupare : nga waahanga pakaru katoa (he iti ake), he iti, he reo, he nui, he nui ake.
Ko nga waahi wehenga matiti kei runga i nga paatai panui whanui iti, ko te tikanga ka pa ki taua waahi pakaru me era katoa kei runga ake (hei tauira, ka .col-sm-4pa ki nga taputapu iti, reo, rahi, nui atu, engari ehara i te xswaahi pakaru tuatahi).
Ka taea e koe te whakamahi i nga karaehe matiti kua tautuhia-a-mua (pēnei i .col-4te ) Sass mixins ranei mo etahi atu tohu tohu.

Kia mohio koe ki nga herenga me nga pepeke huri noa i te flexbox , penei i te kore e kaha ki te whakamahi i etahi huānga HTML hei ipu ngawari .

Kōwhiringa mātiti

Ahakoa ka whakamahi a Bootstrap i te s, i te ems ranei remmo te tautuhi i te nuinga o nga rahi, pxka whakamahia te s mo nga waahi pakaru me nga whanui ipu. Na te mea ko te whanui tauranga tiro kei roto i nga pika kaore e rereke ki te rahi momotuhi .

Tirohia te mahi a nga ahuatanga o te punaha matiti Bootstrap puta noa i nga taputapu maha me te tepu pai.

	He iti ake <576px	Iti ≥576px	Waenga ≥768px	Nui ≥992px	Nui atu ≥1200px
Max whanui ipu	Kore (aunoa)	540px	720px	960px	1140px
Pimua karaehe	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# o nga pou	12
Te whanui o te awaawa	30px (15px ki ia taha o te tīwae)
Nestable	Ae
Whakaraupapa tīwae	Ae

Nga pou tahora-aunoa

Whakamahia nga karaehe pou-waahi-motuhake kia ngawari te rahi o nga pou me te kore he karaehe tau tino rite ki te .col-sm-6.

Ōrite-whānui

Hei tauira, e rua nga whakatakotoranga matiti e pa ana ki ia taputapu me te tauranga tirohanga, mai i xste xl. Tāpirihia he maha o nga karaehe-iti ake mo ia wehenga e hiahia ana koe ka rite te whanui o ia pou.

1 o 2

2 o 2

1 o 3

2 o 3

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

Ka taea te wawahi i nga pou rite-whanui ki nga rarangi maha, engari he pepeke Safari flexbox i aukati i tenei mahi me te kore flex-basishe border. He huarahi whakatika mo nga putanga kaitirotiro tawhito, engari kaore e tika mena kei te hou koe.

Tīwae

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Te whakatakoto i te whanui o te pou kotahi

Ko te whakatakotoranga-aunoa mo nga pou matiti flexbox ko te tikanga ka taea e koe te tautuhi i te whanui o te pou kotahi me te whakarereke aunoa i nga pou teina huri noa. Ka taea e koe te whakamahi i nga karaehe matiti kua tautuhia-a-mua (penei i te whakaaturanga i raro nei), nga whakauru matiti, nga whanui rarangi-roto ranei. Kia mahara ka huri te rahi o etahi atu pou ahakoa te whanui o te pouwaenga.

1 o 3

2 o 3 (whānui)

3 o 3

1 o 3

2 o 3 (whānui)

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

Ihirangi whanui taurangi

Whakamahia col-{breakpoint}-autonga karaehe ki te rahi o nga pou i runga i te whanui taiao o o raatau ihirangi.

1 o 3

Ihirangi whanui taurangi

3 o 3

1 o 3

Ihirangi whanui taurangi

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

Haupae-maha te whanui-rite

Waihangahia nga pou rite-whanui e horahia ana nga rarangi maha ma te whakauru i te .w-100waahi e hiahia ana koe kia pakaru nga pou ki tetahi raina hou. Kia aro mai nga wehenga ma te whakakotahi i nga .w-100taputapu whakaatu urupare .

col

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

Nga karaehe whakautu

Kei roto i te matiti a Bootstrap nga taumata e rima o nga karaehe kua tautuhia i mua mo te hanga i nga whakatakotoranga urupare uaua. Whakaritehia te rahi o ou pou ki runga i nga taputapu iti, iti, reo, rahi, rahi atu ranei ahakoa e pai ana koe.

Nga waahi pakaru katoa

Mo nga matiti e rite ana mai i te iti rawa o nga taputapu ki te rahi, whakamahia te .colme .col-*nga akomanga. Tauwhāitihia he karaehe kua tau ina hiahia koe i tetahi pou tino rahi; te kore, ite noa ki te piri ki .col.

col

col-8

col-4

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

Tāpae ki te whakapae

Ma te whakamahi i te huinga .col-sm-*karaehe kotahi, ka taea e koe te hanga i tetahi punaha matiti taketake ka timata ki te tapae i mua i te noho whakapae me te waahi pakaru iti ( sm).

col-sm-8

col-sm-4

col-sm

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

Whakaranuhia me te whakarite

Kare koe e hiahia kia tapae noa o pou ki etahi rarangi matiti? Whakamahia he huinga o nga karaehe rereke mo ia taumata ina hiahiatia. Tirohia te tauira i raro nei mo te whakaaro pai ake mo te mahi katoa.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Tirohanga

Whakamahia nga taputapu tirohanga flexbox ki te tiaaro poutū me te whakapae i nga pou.

Tirohanga poutū

Ko tetahi o nga pou e toru

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

Ko tetahi o nga pou e toru

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

Tirohanga whakapae

Ko tetahi o nga pou e rua

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

Karekau he awaawa

Ka taea te tango i nga awaawa i waenga i nga pou i roto i a maatau karaehe matiti kua tohua me te .no-gutters. Ka tangohia e tenei nga margins kino .rowme te whakapae paddingmai i nga pou tamariki tata katoa.

Anei te waehere puna mo te hanga i enei momo. Kia mahara ko nga taapiri o te pou ka horahia ki nga pou tamariki tuatahi anake, a ka whaaia ma te kaiwhiri huanga . Ahakoa tenei ka whakaputa i tetahi kaikowhiri motuhake ake, ka taea tonu te whakarite i te papa o nga pou me nga taputapu mokowhiti .

Kei te hiahia hoahoa taha-ki-te-taha? Whakataka te matua .containerranei .container-fluid.

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

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

I roto i nga mahi, koinei te ahua. Kia mahara ka taea tonu e koe te whakamahi i tenei me etahi atu karaehe matiti kua tautuhia-mua (tae atu ki nga whanui o nga pou, nga taumata whakautu, nga raupapatanga, me etahi atu).

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

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Tākai tīwae

Ki te neke atu i te 12 nga pou ka whakauruhia ki roto i te rarangi kotahi, ka takai ia roopu o nga pou taapiri, hei waeine kotahi, ki tetahi raina hou.

.col-9

.col-4
Mai i te 9 + 4 = 13 > 12, ka takaia tenei wehenga 4-tīwae-whanui ki tetahi raina hou hei wae piri tahi.

.col-6 Ka
haere tonu nga pou o muri mai i te raina hou.

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

Ka pakaru te pou

Ko te wawahi i nga pou ki tetahi raina hou i roto i te pouaka whakaraerae me mahi iti: taapirihia he huānga ki nga waahi width: 100%katoa e hiahia ana koe ki te takai i o pou ki tetahi raina hou. Ko te tikanga ka tutuki tenei me te maha o nga .rows, engari kaore e taea e nga tikanga whakatinana katoa te korero mo tenei.

.col-6 .col-sm-3

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

Ka taea ano e koe te tono i tenei wehenga ki nga waahi wehenga motuhake me o maatau taputapu whakaatu urupare .

.col-6 .col-sm-4

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

Te whakaraupapa ano

Whakaritea nga karaehe

Whakamahia .order-nga karaehe hei whakahaere i te raupapa ataata o to ihirangi. He urupare enei karaehe, no reira ka taea e koe te whakarite i te ordermaataki maataki (hei tauira, .order-1.order-md-2). Kei roto ko te tautoko 1puta 12noa i nga reanga matiti e rima.

Tuatahi, engari kaore i raupapa

Tuarua, engari whakamutunga

Tuatoru, engari tuatahi

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

He karaehe whakautu .order-firstme .order-lastnga karaehe ka huri i te ordero te huānga ma te tono order: -1me te order: 13( order: $columns + 1), ia. Ka taea hoki te whakakotahi i enei karaehe me nga .order-*karaehe kua tau ina hiahiatia.

Tuatahi, engari whakamutunga

Tuarua, engari kaore i te raupapa

Tuatoru, engari tuatahi

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Whangai nga pou

Ka taea e koe te whakatiki i nga pou matiti ma nga huarahi e rua: .offset-a maatau akomanga matiti urupare me a maatau taputapu tawhē . Ko te rahi o nga karaehe matiti kia rite ki nga pou, engari he pai ake nga tawhē mo nga whakatakotoranga tere e rereke ana te whanui o te taapiri.

Nga karaehe whakaheke

Nukuhia nga pou ki te taha matau ma te whakamahi i .offset-md-*nga karaehe. Ka whakanuia e enei karaehe te tawhē mauī o te tīwae mā ngā *tīwae. Hei tauira, .offset-md-4neke .col-md-4atu i nga pou e wha.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

I tua atu i te whakakore i nga pou i nga waahi pakaru urupare, ka hiahia pea koe ki te tautuhi i nga waahanga. Tirohia tenei mahi i roto i te tauira matiti .

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

Nga taputapu tawhē

Ma te neke ki te pouaka whakarorohiko i te v4, ka taea e koe te whakamahi i nga taputapu tawhē penei .mr-autoi te turaki i nga pou teina kia matara atu tetahi ki tetahi.

.col-md-4

.col-md-4 .ml-aunoa

.col-md-3 .ml-md-aunoa

.col-auto .mr-auto

.col-aunoa

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

Kohanga

Hei whakakohanga i to ihirangi ki te matiti taunoa, taapirihia he huinga pou hou .rowme te huinga o .col-sm-*nga pou ki roto i te tīwae tīariari .col-sm-*. Ko nga rarangi kohanga me whakauru he huinga pou ka taapiri ake ki te 12, iti ake ranei (kaore e hiahiatia kia whakamahi koe i nga pou 12 e waatea ana).

Taumata 1: .col-sm-9

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

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

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

Sass mixins

I te wa e whakamahi ana i nga konae Sass puna a Bootstrap, kei a koe te kowhiringa ki te whakamahi i nga taurangi Sass me nga whakaranu hei hanga i nga whakatakotoranga wharangi ritenga, tikanga, me te aro. Ka whakamahia e a maatau karaehe matiti kua tautuhia ake enei taurangi me nga whakaranu hei whakarato i te huinga katoa o nga karaehe rite-ki-te whakamahi mo nga whakatakotoranga tere tere.

Taurangi

Ko nga taurangi me nga mapi ka whakatau i te maha o nga pou, te whanui o te awaawa, me te waahi uiui pāpāho hei timata i nga pou tere. Ka whakamahia e matou enei ki te whakaputa i nga karaehe matiti kua tautuhia i runga ake nei, tae atu ki nga ranunga ritenga kua whakarārangihia i raro nei.

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

Whakaranu

Ka whakamahia nga Mixins i te taha o nga taurangi matiti hei whakaputa i te CSS tohu mo nga pou matiti takitahi.

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

Te whakamahi tauira

Ka taea e koe te whakarereke i nga taurangi ki o ake uara ritenga, ka whakamahi noa ranei i nga ranunga me o raatau uara taunoa. Anei he tauira mo te whakamahi i nga tautuhinga taunoa ki te hanga tahora pou-rua me te mokowhiti i waenga.

.example-container {
  width: 800px;
  @include make-container();
}

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

Te ihirangi matua

Ihirangi tuarua

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

Te whakarite i te matiti

Ma te whakamahi i a maatau taurangi Sass me nga mapi i hangaia, ka taea te whakarite katoa i nga karaehe matiti kua tautuhia. Hurihia te maha o nga taumata, nga inenga patai pāpāho, me nga whanui ipu—ka whakahiato ano.

Nga pou me nga awaawa

Ko te maha o nga pou matiti ka taea te whakarereke ma nga taurangi Sass. $grid-columnsKa whakamahia ki te whakaputa i nga whanui (i roto i te ōrau) o ia tīwae takitahi, me te $grid-gutter-widthtuku i nga whanui motuhake-waahi ka wehewehea kia rite ki te taha padding-lefto padding-rightnga awaawa pou.

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

Ngā taumata mātiti

Ko te neke ki tua atu o nga pou, ka taea hoki e koe te whakarite i te maha o nga taumata matiti. Mena kei te pirangi koe kia wha noa nga taumata matiti, ka whakahou koe i te $grid-breakpointsme $container-max-widthstetahi mea penei:

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

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

Ina huri koe ki nga taurangi Sass, mapi ranei, me tiaki e koe o huringa me te whakahiato ano. Ma te mahi pera ka puta he huinga hou o nga karaehe matiti kua tautuhia-mua mo te whanui o nga pou, nga taapiri, me te ota. Ka whakahouhia ano nga taputapu tirohanga urupare ki te whakamahi i nga waahanga pakaru ritenga. Me whakarite ki te tautuhi i nga uara matiti ki roto px(kaore rem, em, ranei %).