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 karekau e huri 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>

Raina-maha te whanui-rite

Waihangahia nga pou rite-whanui e toro ana i nga raina 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 whakauru .w-100ki etahi taputapu whakaatu aro .

He pepeke Safari flexbox i aukati i tenei mahi me te kore flex-basishe border. He huarahi mahi mo nga putanga kaitirotiro tawhito, engari kaore e tika ana mena ka kore e uru o kaitirotiro whainga ki roto i nga putanga kaaiti.

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>

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>

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

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 tiimata ka tiimata ka noho whakapae ki te waahi pakaru iti ( 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>

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

Nga awaawa

Ka taea te whakatika i nga awaawa ma te whawhati-motuhake me nga karaehe whaipainga tawhē kino. Hei huri i nga awaawa ki tetahi rarangi, honoa he taputapu tawhē kino ki runga i te .rowme te taurite i nga taputapu papaa ki te .cols. Me whakatikatika ano te matua, te matua .containerranei, .container-fluidkia kore ai e puhake, me te whakamahi ano i nga taputapu papaa e rite ana.

Anei he tauira mo te whakarite i te matiti Bootstrap i te lgwaahi wehenga nui ( ) me runga ake. Kua whakanuia e matou te papa .colki te .px-lg-5, ka whakahē i tera ki .mx-lg-n5runga i te matua .rowka whakatikahia te .containertakai ki te .px-lg-5.

Padding tīwae ritenga

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

Ngā tīwae haupae

Whakamahia nga .row-cols-*karaehe urupare ki te whakarite tere i te maha o nga pou e pai ake ai to korero me to tahora. I te mea .col-*e pa ana nga karaehe noa ki nga pou takitahi (hei tauira, .col-md-4), ka whakatauhia nga akomanga rarangi haupae ki te matua .rowhei pokatata.

Whakamahia enei akomanga pou haupae ki te hanga tere i nga tahora matiti taketake, ki te whakahaere ranei i o whakatakotoranga kaari.

Tīwae

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

Tīwae

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

Tīwae

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

Tīwae

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

Tīwae

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

Ka taea hoki e koe te whakamahi i te 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);
  }
}

Tirohanga

Whakamahia nga taputapu tirohanga flexbox ki te tiaaro poutū me te whakapae i nga pou. Karekau a Internet Explorer 10-11 e tautoko ana i te tirohanga poutū o nga mea ngawari ina he min-heighttohu kei raro iho nei. Tirohia nga Flexbugs #3 mo etahi atu korero.

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 e koe te whakamahi tonu 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-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>

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

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

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

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 i DOM, karekau he ota i tono

Tuarua i DOM, me te raupapa nui ake

Tuatoru i DOM, me te raupapa 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>

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 i DOM, i ota whakamutunga

Tuarua i roto i te DOM, kaore i raupapa

Tuatoru i roto i DOM, whakahau tuatahi

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

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

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

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

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 {
  @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);
  }
}

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 i te wā $grid-gutter-widthe whakatakoto ana i te whānui mō ngā awaawa o te tīwae.

$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 i 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 %).