Source

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-topnópadding-top
b- le haghaidh ranganna a leagann margin-bottomnópadding-bottom
l- le haghaidh ranganna a leagann margin-leftnópadding-left
r- le haghaidh ranganna a leagann margin-rightnópadding-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 marginnó paddingar gach 4 thaobh den eilimint

Áit a bhfuil méid mar cheann de:

0- le haghaidh ranganna a chuireann deireadh leis an marginnó paddingtrína shocrú go0
1- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginnó paddinggo$spacer * .25
2- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginnó paddinggo$spacer * .5
3- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginnó paddinggo$spacer
4- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginnó paddinggo$spacer * 1.5
5- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn an marginnó paddinggo$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

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>