in English

Spásáil

Áirítear le Bootstrap raon leathan ranganna áirgiúlachta sofhreagrach corrlaigh agus stuála chun cuma eiliminte a mhodhnú.

Conas a oibríonn sé

Sann luachanna atá sofhreagrach-chairdiúil d'eilimint nó d'fhothacar dá thaobh le haicmí gearrscríbhneoireachta margin. paddingÁirítear leis tacaíocht d’airíonna aonair, gach maoin, agus airíonna ingearacha agus cothrománacha. Tógtar na ranganna ó léarscáil Sass réamhshocraithe .25remó 3rem.

Nodaireacht

Níl aon ghiorrúchán brisphointe iontu ag fóntais spáis a bhaineann le gach bristephointe, ó xsgo ,. xlTá sé seo amhlaidh toisc go gcuirtear na ranganna sin i bhfeidhm ó min-width: 0agus suas, agus mar sin níl siad faoi cheangal ag ceist mheáin. Áiríonn na brisphointí atá fágtha, áfach, giorrúchán brisphointe.

Ainmnítear na ranganna ag baint úsáide as an bhformáid {property}{sides}-{size}le haghaidh xsagus {property}{sides}-{breakpoint}-{size}le haghaidh sm, md, lg, agus xl.

Sa chás gur ceann de na nithe seo a leanas an mhaoin :

  • m- le haghaidh ranganna a leagannmargin
  • p- le haghaidh ranganna a leagannpadding

Áit a bhfuil taobhanna ar cheann de:

  • t- le haghaidh ranganna a leagann margin-toppadding-top
  • b- le haghaidh ranganna a leagann margin-bottompadding-bottom
  • l- le haghaidh ranganna a leagann margin-leftpadding-left
  • r- le haghaidh ranganna a leagann margin-rightpadding-right
  • x- le haghaidh ranganna a leagann an dá *-leftagus*-right
  • y- le haghaidh ranganna a leagann an dá *-topagus*-bottom
  • bán - le haghaidh ranganna a leagann síos marginpaddingar gach 4 thaobh den eilimint

Áit a bhfuil méid mar cheann de:

  • 0- le haghaidh ranganna a chuireann deireadh leis an marginpaddingtrína shocrú go0
  • 1- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginpaddinggo$spacer * .25
  • 2- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginpaddinggo$spacer * .5
  • 3- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginpaddinggo$spacer
  • 4- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginpaddinggo$spacer * 1.5
  • 5- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginpaddinggo$spacer * 3
  • auto- le haghaidh ranganna a shocraíonn an t margin-uathoibríoch

(Is féidir leat níos mó méideanna a chur leis trí iontrálacha a chur leis an $spacersathróg léarscáil Sass.)

Samplaí

Seo roinnt samplaí ionadaíocha de na ranganna seo:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Lárú cothrománach

Ina theannta sin, cuimsíonn Bootstrap .mx-autoaicme freisin chun inneachar leibhéal bloc leithead seasta a dhíriú go cothrománach - is é sin, ábhar a bhfuil display: blockagus widthtacar aige - trí na himill chothrománacha a shocrú go auto.

Gné lárnaithe
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Corrlach diúltach

I CSS, marginis féidir le hairíonna luachanna diúltacha a úsáid ( paddingní féidir). Ó 4.2, tá fóntais corrlaigh diúltacha curtha againn le haghaidh gach slánuimhir neamh-nialais atá liostaithe thuas (m.sh., 1, 2, , 3, 4, 5). Tá na fóntais seo oiriúnach chun gáitéir cholúin ghreille a shaincheapadh thar phointí briste.

Tá an chomhréir beagnach mar an gcéanna leis na fóntais réamhshocraithe corrlaigh dhearfacha, ach nsula gcuirtear an méid a iarrtar leis. Seo rang samplach a mhalairt de .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Seo sampla den ghreille Bootstrap a shaincheapadh ag an mdbrisphointe meán ( ) agus os a chionn. Táimid tar éis an .colstuáil a mhéadú .px-md-5agus ansin frithghníomhú leis sin .mx-md-n5ar an tuismitheoir .row.

Stuála colún saincheaptha
Stuála colún saincheaptha
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>