Siostam clèithe

Cleachd a’ ghriod flexbox gluasadach cumhachdach againn gus dealbhadh de gach cruth agus meud a thogail le taing do shiostam dusan colbh, còig ìrean freagairteach bunaiteach, caochladairean Sass agus measgachadh, agus dusanan de chlasaichean ro-mhìnichte.

Mar a tha e ag obair

Bidh siostam clèithe Bootstrap a’ cleachdadh sreath de shoithichean, sreathan, agus cholbhan gus susbaint a dhealbhadh agus a cho-thaobhadh. Tha e air a thogail le flexbox agus tha e làn fhreagarrach. Gu h-ìosal tha eisimpleir agus sealladh domhainn air mar a tha a’ ghriod a’ tighinn còmhla.

Ùr no air nach eil thu eòlach air flexbox? Leugh an stiùireadh flexbox CSS Tricks seo airson cùl-fhiosrachadh, briathrachas, stiùireadh, agus criomagan còd.

Aon de thrì colbhan

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

Tha an eisimpleir gu h-àrd a’ cruthachadh trì colbhan den aon leud air innealan beaga, meadhanach, mòr agus mòr a bharrachd a’ cleachdadh ar clasaichean clèithe ro-mhìnichte. Tha na colbhan sin stèidhichte air an duilleag leis a’ phàrant .container.

Le bhith ga bhriseadh sìos, seo mar a tha e ag obair:

Bidh soithichean a’ toirt seachad dòigh air susbaint na làraich agad a mheadhanachadh agus a phasgadh gu còmhnard. Cleachd .containerairson leud piogsail freagairteach no .container-fluidairson width: 100%thar gach sealladh agus meud inneal.
Tha sreathan nan còmhdach airson colbhan. Tha còmhnard aig gach colbh padding(ris an canar gutter) airson smachd a chumail air an àite eadar iad. Tha seo paddingan uairsin air a chuir an aghaidh air na sreathan le oirean àicheil. San dòigh seo, tha a h-uile susbaint anns na colbhan agad air a cho-thaobhadh gu fradharcach sìos an taobh chlì.
Ann an cruth clèithe, feumar susbaint a chuir ann an colbhan agus chan fhaod ach colbhan a bhith nan clann de shreathan sa bhad.
Taing do flexbox, bidh colbhan clèithe gun shònrachadh widthair an dealbhadh gu fèin-ghluasadach mar cholbhan de leud co-ionann. Mar eisimpleir, bidh ceithir eisimpleirean de .col-smgach fear gu fèin-ghluasadach 25% de leud bhon àite-briseadh beag agus suas. Faic an roinn colbhan cruth fèin-ghluasadach airson barrachd eisimpleirean.
Tha clasaichean colbh a’ comharrachadh an àireamh de cholbhan a bu mhath leat a chleachdadh a-mach às na 12 a dh’ fhaodadh a bhith ann airson gach sreath. Mar sin, ma tha thu ag iarraidh trì colbhan de leud co-ionann, faodaidh tu .col-4.
Tha colbhan widthair an suidheachadh ann an ceudadan, agus mar sin bidh iad an-còmhnaidh siùbhlach agus meud an coimeas ris an eileamaid phàrant aca.
Tha còmhnard aig colbhan paddinggus na cutairean a chruthachadh eadar colbhan fa leth, ge-tà, faodaidh tu an toirt air falbh marginbho na sreathan agus paddingbho na colbhan leis .no-guttersan .row.
Gus am bi a’ ghriod freagairteach, tha còig puingean brisidh clèithe ann, aon airson gach briseadh freagairteach : a h-uile puing-briseadh (beag a bharrachd), beag, meadhanach, mòr agus mòr a bharrachd.
Tha puingean brisidh clèithe stèidhichte air ceistean meadhanan an leud as lugha, a’ ciallachadh gu bheil iad a’ buntainn ris an aon phuing brisidh sin agus a h-uile duine os a chionn (me, .col-sm-4a’ buntainn ri innealan beaga, meadhanach, mòr agus mòr a bharrachd, ach chan e a’ chiad àite xsbrisidh).
Faodaidh tu clasaichean clèithe ro-mhìnichte (leithid .col-4) no Sass mixins a chleachdadh airson barrachd comharrachadh semantach.

Bi mothachail air na cuingeadan agus na mialan timcheall air flexbox , mar an neo- chomas cuid de eileamaidean HTML a chleachdadh mar shoithichean sùbailte .

Roghainnean clèithe

Ged a bhios Bootstrap a’ cleachdadh ems no rems airson a’ mhòr-chuid de mheudan a mhìneachadh, pxthathas a’ cleachdadh s airson puingean brisidh clèithe agus leud soithichean. Tha seo air sgàth 's gu bheil leud an t-seallaidh ann am piogsail agus nach atharraich e le meud a' chruth -clò .

Faic mar a tha taobhan de shiostam clèithe Bootstrap ag obair thairis air iomadh inneal le clàr feumail.

	Beag a bharrachd <576px	Beag ≥576px	Meadhanach ≥768px	Mòr ≥992px	Mòr a bharrachd ≥1200px
Meud an t-soithich as àirde	Chan eil gin (auto)	540px	720px	960px	1140px
Ro-leasachan clas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# de cholbhan	12
Leud an cutair	30px (15 piogsail air gach taobh de cholbh)
Neo-sheasmhach	Tha
Òrdugh colbh	Tha

Colbhan cruth fèin-ghluasadach

Cleachd clasaichean colbh a tha sònraichte do phuing-bhriseadh airson meud colbh furasta às aonais clas le àireamhan soilleir mar .col-sm-6.

Co-ionann-leud

Mar eisimpleir, seo dà chruth clèithe a tha a’ buntainn ri gach inneal agus port-seallaidh, bho xsgu xl. Cuir àireamh sam bith de chlasaichean gun aonad ris airson gach puing-briseadh a dh’ fheumas tu agus bidh gach colbh den aon leud.

1 à 2

2 à 2

1 à 3

2 à 3

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

Ioma-loidhne de leud co-ionann

Cruthaich colbhan co-ionann de leud a tha a 'dol thairis air iomadh loidhne le bhith a' cur a-steach àite .w-100far a bheil thu airson gum bi na colbhan a 'briseadh gu loidhne ùr. Dèan na briseadh freagairteach le bhith a’ measgachadh .w-100le cuid de ghoireasan taisbeanaidh freagairteach .

Bha buga Safari flexbox ann a chuir casg air seo bho bhith ag obair às aonais sònrachadh soilleir flex-basisno border. Tha dòighean-obrach ann airson dreachan brabhsair nas sine, ach cha bu chòir dhaibh a bhith riatanach mura tuit na brobhsairean targaid agad a-steach do na dreachan buggy.

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>

A 'suidheachadh aon leud colbh

Tha cruth fèin-ghluasadach airson colbhan clèithe flexbox cuideachd a’ ciallachadh gun urrainn dhut leud aon cholbh a shuidheachadh agus na colbhan peathraichean ath-mheudachadh timcheall air gu fèin-ghluasadach. Faodaidh tu clasaichean clèithe ro-mhìnichte a chleachdadh (mar a chithear gu h-ìosal), measgachadh clèithe, no leud in-loidhne. Thoir an aire gum bi na colbhan eile ag ath-mheudachadh ge bith dè cho farsaing sa tha colbh an ionaid.

1 à 3

2 de 3 (nas fharsainge)

3 de 3

1 à 3

2 de 3 (nas fharsainge)

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

Susbaint leud caochlaideach

Cleachd col-{breakpoint}-autoclasaichean gus colbhan a mheudachadh a rèir leud nàdarra an t-susbaint aca.

1 à 3

Susbaint leud caochlaideach

3 de 3

1 à 3

Susbaint leud caochlaideach

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

Clasaichean freagairteach

Tha cliath Bootstrap a’ toirt a-steach còig ìrean de chlasaichean ro-mhìnichte airson dealbhadh iom-fhillte freagairteach a thogail. Gnàthaich meud do cholbhan air innealan beaga, beag, meadhanach, mòr no mòr a bharrachd ge bith dè a chì thu iomchaidh.

A h-uile briseadh

Airson grids a tha mar an ceudna bhon fheadhainn as lugha de dh'innealan chun an fheadhainn as motha, cleachd na clasaichean .colagus na .col-*clasaichean. Sònraich clas le àireamh nuair a bhios feum agad air colbh de mheud sònraichte; air dhòigh eile, na bi leisg cumail ris .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>

Air a chruachadh gu còmhnard

A’ cleachdadh aon sheata de .col-sm-*chlasaichean, faodaidh tu siostam clèithe bunaiteach a chruthachadh a thòisicheas air a chruachadh agus a thig gu còmhnard aig a’ phuing-bhriseadh beag ( 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>

Measgaich agus maids

Nach eil thu airson gum bi na colbhan agad dìreach a’ cruachadh ann an cuid de shreathan clèithe? Cleachd measgachadh de chlasaichean eadar-dhealaichte airson gach ìre mar a dh’ fheumar. Faic an eisimpleir gu h-ìosal airson beachd nas fheàrr air mar a tha e uile ag obair.

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

cutairean

Faodar cutairean atharrachadh gu freagairteach le pleadhag a tha sònraichte do bhriseadh-phuing agus clasaichean goireasachd iomaill àicheil. Gus na cutairean atharrachadh ann an sreath sònraichte, paidhir goireas iomaill àicheil air na .rowgoireasan pleadhaig agus maidsidh air an .cols. Is dòcha gum feumar am pàrant .containerno am .container-fluidpàrant atharrachadh cuideachd gus cus sruthadh gun iarraidh a sheachnadh, a’ cleachdadh goireas pleadhaig a-rithist.

Seo eisimpleir de bhith a’ gnàthachadh a’ ghriod Bootstrap aig an àite-briseadh mòr ( lg) agus gu h-àrd. Tha sinn air am .colpleadhag àrdachadh le .px-lg-5, air a dhol an aghaidh sin leis .mx-lg-n5a’ phàrant .rowagus an uairsin air am .containerpasgan atharrachadh le .px-lg-5.

Padding colbh gnàthaichte

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

Colbhan sreath

Cleachd na .row-cols-*clasaichean freagairteach gus an àireamh de cholbhan a shuidheachadh gu sgiobalta as fheàrr a bheir seachad do shusbaint agus do chruth. Ged a tha clasaichean àbhaisteach .col-*a’ buntainn ris na colbhan fa leth (me, .col-md-4), tha na clasaichean colbhan sreath air an suidheachadh air a’ phàrant .rowmar ath-ghoirid.

Cleachd na clasaichean colbhan sreath seo gus dealbhadh clèithe bunaiteach a chruthachadh gu sgiobalta no gus smachd a chumail air cruth a’ chairt agad.

Colbh

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

Colbh

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

Colbh

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

Colbh

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

Colbh

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

Faodaidh tu cuideachd am measgachadh Sass a tha na chois a chleachdadh, 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);
  }
}

Co-thaobhadh

Cleachd goireasan co-thaobhadh flexbox gus colbhan a cho-thaobhadh gu dìreach agus gu còmhnard. Chan eil Internet Explorer 10-11 a’ toirt taic do cho-thaobhadh dìreach de nithean sùbailte nuair a tha an inneal sùbailte min-heightmar a chithear gu h-ìosal. Faic Flexbugs #3 airson tuilleadh fiosrachaidh.

Co-thaobhadh dìreach

Aon de thrì colbhan

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

Aon de thrì colbhan

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

Co-thaobhadh còmhnard

Aon de dhà cholbh

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

Gun cutairean

Faodar na cutairean eadar colbhan anns na clasaichean clèithe ro-mhìnichte againn a thoirt air falbh le .no-gutters. Bidh seo a’ toirt air falbh na h-àicheil margins bho .rowagus a’ chòmhnard paddingàs a h-uile colbh cloinne a tha faisg air làimh.

Seo an còd tùsail airson na stoidhlichean sin a chruthachadh. Thoir an aire gu bheil tar-chuir colbhan air an cuairteachadh gu dìreach a’ chiad cholbh chloinne agus gu bheil iad air an cuimseachadh tro roghnaichear buadhan . Fhad ‘s a tha seo a’ gineadh roghnaiche nas sònraichte, faodar pleadhag colbh a ghnàthachadh tuilleadh le goireasan eadar -dhealaichte .

A bheil feum agad air dealbhadh iomall-gu-oir? Leig às am pàrant .containerno .container-fluid.

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

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

Ann an cleachdadh, seo mar a tha e coltach. Thoir an aire gum faod thu leantainn air adhart a’ cleachdadh seo leis a h-uile clas clèithe ro-mhìnichte eile (a’ toirt a-steach leud colbhan, ìrean freagairteach, ath-òrdughan, agus barrachd).

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

Còmhdach colbh

Ma tha barrachd air 12 colbhan air an cur ann an aon sreath, bidh gach buidheann de cholbhan a bharrachd, mar aon aonad, a’ dol gu loidhne ùr.

.col-9

.col-4
Bho 9 + 4 = 13 > 12, bidh an div 4-colbh seo air a phasgadh air loidhne ùr mar aon aonad ri thaobh.

.col-6 Tha
colbhan a leanas a' leantainn air adhart air an loidhne ùr.

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

Bidh colbh a 'briseadh

Gus colbhan a bhriseadh gu loidhne ùr ann am bogsa flex tha feum air beagan hack: cuir eileamaid ris width: 100%ge bith càite a bheil thu airson do cholbhan a phasgadh gu loidhne ùr. Mar as trice tha seo air a choileanadh le ioma .rows, ach chan urrainn a h-uile dòigh gnìomhachaidh cunntas a thoirt air seo.

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

Faodaidh tu cuideachd am briseadh seo a chuir an sàs aig amannan briseadh sònraichte leis na goireasan taisbeanaidh freagairteach againn .

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

Ag ath-òrdachadh

Òrdaich clasaichean

Cleachd .order-clasaichean airson smachd a chumail air òrdugh lèirsinneach an t -susbaint agad. Tha na clasaichean sin freagairteach, agus mar sin faodaidh tu an suidheachadh a shuidheachadh orderle briseadh (me, .order-1.order-md-2). A’ toirt a-steach taic airson 1tro 12na còig ìrean clèithe.

An toiseach ann an DOM, cha deach òrdugh sam bith a chuir an sàs

San dàrna àite ann an DOM, le òrdugh nas motha

San treas àite ann an DOM, le òrdugh 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>

Tha clasaichean freagairteach ann cuideachd a bhios ag atharrachadh .order-firsteileamaid le bhith a’ cur a -steach agus ( ), fa leth. Faodar na clasaichean sin a mheasgadh cuideachd leis na clasaichean àireamhaichte mar a dh’ fheumar..order-lastorderorder: -1order: 13order: $columns + 1.order-*

An toiseach ann an DOM, air òrdachadh mu dheireadh

San dàrna àite ann an DOM, gun òrdugh

San treas àite ann an DOM, air òrdachadh an toiseach

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

Colbhan dheth

Faodaidh tu colbhan clèithe a chothromachadh ann an dà dhòigh: na .offset-clasaichean clèithe freagairteach againn agus na goireasan iomaill againn . Tha clasaichean clèithe air am meud gus a bhith co-ionnan ri colbhan fhad ‘s a tha oirean nas fheumail airson dealbhadh sgiobalta far a bheil leud a’ chothromachadh caochlaideach.

Clasaichean dheth

Gluais colbhan air an taobh cheart a’ cleachdadh .offset-md-*chlasaichean. Bidh na clasaichean sin ag àrdachadh iomall clì colbh le *colbhan. Mar eisimpleir, .offset-md-4gluais .col-md-4thairis air ceithir colbhan.

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

A bharrachd air a bhith a’ glanadh colbhan aig puingean brisidh freagairteach, is dòcha gum feum thu cuir dheth ath-shuidheachadh. Faic seo ann an gnìomh san eisimpleir clèithe .

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

Goireasan iomall

Leis a’ ghluasad gu flexbox ann an v4, faodaidh tu goireasan iomaill a chleachdadh mar .mr-autoa bhith a’ toirt air colbhan peathraichean a bhith air falbh bho chèile.

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

A' neadachadh

Gus do shusbaint a neadachadh leis a’ ghriod àbhaisteach, cuir colbhan ùra .rowagus seata de .col-sm-*cholbhan taobh a-staigh .col-sm-*colbh a tha ann mu thràth. Bu chòir seata de cholbhan a bhith ann an sreathan neadachaidh a chuireas suas ri 12 no nas lugha (chan fheum thu na 12 colbhan a tha rim faighinn a chleachdadh).

Ìre 1: .col-sm-9

Ìre 2: .col-8 .col-sm-6

Ìre 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 measgachadh

Nuair a bhios tu a’ cleachdadh faidhlichean Sass stòr Bootstrap, tha roghainn agad caochladairean agus measgachadh Sass a chleachdadh gus dealbhadh duilleag àbhaisteach, semantach agus freagairteach a chruthachadh. Bidh na clasaichean clèithe ro-mhìnichte againn a’ cleachdadh na h-aon chaochladairean agus mheasgachaidhean gus sreath iomlan de chlasaichean deiseil a thoirt seachad airson dealbhadh freagairteach luath.

Caochlaidhean

Bidh caochladairean agus mapaichean a’ dearbhadh an àireamh de cholbhan, leud an gutter, agus puing ceist nam meadhanan far an tòisichear air colbhan air bhog. Bidh sinn gan cleachdadh gus na clasaichean clèithe ro-mhìnichte a chaidh a chlàradh gu h-àrd a ghineadh, a bharrachd air na measgachaidhean àbhaisteach a tha air an liostadh gu h-ìosal.

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

Measgachadh

Bithear a’ cleachdadh mheasgachaidhean ann an co-bhonn ris na caochladairean clèithe gus CSS semantach a ghineadh airson colbhan clèithe fa leth.

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

Eisimpleir de chleachdadh

Faodaidh tu na caochladairean atharrachadh gu na luachan àbhaisteach agad fhèin, no dìreach na mixins a chleachdadh leis na luachan bunaiteach aca. Seo eisimpleir de bhith a’ cleachdadh nan roghainnean bunaiteach gus cruth dà-cholbh a chruthachadh le beàrn eadar.

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

Prìomh shusbaint

Susbaint àrd-sgoile

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

A 'gnàthachadh a' chliath

A’ cleachdadh ar caochladairean agus mapaichean griod Sass, tha e comasach na clasaichean clèithe ro-mhìnichte a ghnàthachadh gu tur. Atharraich an àireamh de shreathan, meud ceist nam meadhanan, agus leud an t-soithich - an uairsin ath-chruinnich.

Colbhan agus cutairean

Faodar an àireamh de cholbhan clèithe atharrachadh tro chaochladairean Sass. $grid-columnsair a chleachdadh gus leud (sa cheud) de gach colbh fa leth a ghineadh fhad ‘s a tha e $grid-gutter-widtha’ suidheachadh leud nan cutairean colbh.

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

Sreathan clèithe

A’ gluasad nas fhaide na na colbhan fhèin, faodaidh tu cuideachd an àireamh de shreathan clèithe a ghnàthachadh. Nam biodh tu ag iarraidh dìreach ceithir ìrean clèithe, dh’ ùraicheadh tu an $grid-breakpointsagus $container-max-widthsgu rudeigin mar seo:

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

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

Nuair a nì thu atharrachadh sam bith air caochladairean no mapaichean Sass, feumaidh tu na h-atharrachaidhean agad a shàbhaladh agus ath-chruinneachadh. Le bhith a’ dèanamh seo bheir sin a-mach seata ùr snasail de chlasaichean clèithe ro-mhìnichte airson leud colbhan, cuir dheth, agus òrdachadh. Thèid goireasan faicsinneachd fhreagarrach ùrachadh cuideachd gus na puingean brisidh àbhaisteach a chleachdadh. Dèan cinnteach gun cuir thu luachan clèithe ann an px(chan e rem, em, no %).