Kaʻawale

Loaʻa i ka Bootstrap kahi ākea ākea o ka palena pane pōkole, padding, a me nā papa pono gap e hoʻololi i ke ʻano o kahi mea.

Ma kēia ʻaoʻao

ʻO ka palena a me ka pale

E hāʻawi i ka pane-aloha a i marginʻole paddingnā waiwai i kahi mea a i ʻole kahi ʻāpana o kona mau ʻaoʻao me nā papa pōkole. Loaʻa i ke kākoʻo no kēlā me kēia waiwai, nā waiwai a pau, a me nā waiwai kū a me ka pae. Kūkulu ʻia nā papa mai kahi palapala Sass paʻamau mai .25remka 3rem.

Ke hoʻohana nei i ka module CSS Grid layout? E noʻonoʻo e hoʻohana i ka pono gap .

Notation

ʻO nā pono hana hoʻokaʻawale e pili ana i nā wahi haʻihaʻi a pau, mai xska xxl, ʻaʻohe wahi pōkole i loko o ia mau mea. No ka mea ua hoʻohana ʻia kēlā mau papa mai min-width: 0a i luna, a no laila ʻaʻole i hoʻopaʻa ʻia e kahi nīnau media. ʻO nā wahi haʻi i koe naʻe, loaʻa i kahi pōkole breakpoint.

Ua kapa ʻia nā papa me ke ʻano {property}{sides}-{size}no xsa {property}{sides}-{breakpoint}-{size}no sm, md, lg, xl, a me xxl.

ʻO kahi waiwai kekahi o:

m- no nā papa i hoʻonohonohomargin
p- no nā papa i hoʻonohonohopadding

ʻO kahi ʻaoʻao kekahi o:

t- no nā papa i hoʻonohonoho a i margin-topʻolepadding-top
b- no nā papa i hoʻonohonoho a i margin-bottomʻolepadding-bottom
s- (hoʻomaka) no nā papa i hoʻonohonoho a i margin-leftʻole padding-leftma LTR, a i margin-rightʻole padding-rightma RTL
e- (hopena) no nā papa i hoʻonohonoho a i margin-rightʻole padding-rightma LTR, a i margin-leftʻole padding-leftma RTL
x- no nā papa i hoʻonohonoho ʻelua *-lefta*-right
y- no nā papa i hoʻonohonoho ʻelua *-topa*-bottom
blank - no nā papa e hoʻonoho i kahi a i marginʻole paddingma nā ʻaoʻao 4 āpau o ka mea

Aia ka nui o kekahi o:

0- no nā papa e hoʻopau i ka a i marginʻole paddingma ka hoʻonohonoho ʻana iā ia0
1- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * .25
2- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * .5
3- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer
4- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * 1.5
5- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * 3
auto- no nā papa i hoʻonohonoho i ka marginauto

(Hiki iā ʻoe ke hoʻohui i nā nui hou aku ma ka hoʻohui ʻana i nā mea hoʻokomo i ka $spacersloli palapala Sass.)

Nā laʻana

Eia kekahi mau hiʻohiʻona o kēia mau papa:

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

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

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

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

Ke kikowaena hoʻopololei

Eia hou, ua komo pū ʻo Bootstrap i kahi .mx-autopapa no ka hoʻonohonoho ʻana i ka maʻiʻo pae ākea paʻa paʻa-ʻo ia hoʻi, ka maʻiʻo i loaʻa display: blocka me kahi widthhoʻonohonoho—ma ka hoʻonohonoho ʻana i nā palena ākea i auto.

ʻElemu waena

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

palena ʻino

Ma CSS, marginhiki i nā waiwai ke hoʻohana i nā waiwai maikaʻi ʻole ( paddingʻaʻole hiki). Hoʻopau ʻia kēia mau palena maikaʻi ʻole e ka paʻamau , akā hiki ke hoʻohana ʻia ma Sass ma ka hoʻonohonoho ʻana $enable-negative-margins: true.

Aneane like ka syntax me ka mea paʻamau, nā pono palena maikaʻi, akā me ka hoʻohui ʻana nma mua o ka nui i noi ʻia. Eia kekahi laʻana papa ʻokoʻa o .mt-1:

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

Gap

I ka hoʻohana display: gridʻana iā , hiki iā ʻoe ke hoʻohana i nā gappono hana ma ka pahu pahu makua. Hiki i kēia ke mālama i ka hoʻohui ʻana i nā pono hana margin i nā mea kikoʻī pākahi (keiki o kahi display: gridpahu). Hoʻopili ʻia nā pono hana Gap ma o ka paʻamau, a ua hana ʻia ma o kā mākou API ponoʻī, e pili ana i ka $spacerspalapala Sass.

ʻImi ʻāpana 1

ʻImi helu 2

ʻImi helu 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Loaʻa i ke kākoʻo nā koho pane no nā wahi haʻihaʻi āpau o Bootstrap, a me nā nui ʻeono mai ka $spacerspalapala ʻāina ( 0– 5). ʻAʻohe .gap-autopapa hoʻohana e like me ka maikaʻi like me .gap-0.

Sass

Palapala 'āina

Hōʻike ʻia nā pono hoʻokaʻawale ma o ka palapala ʻāina ʻo Sass a laila hana ʻia me kā mākou mau pono API.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

API no nā pono hana

Hōʻike ʻia nā pono hoʻokaʻawale i kā mākou API ponoʻī ma scss/_utilities.scss. E aʻo pehea e hoʻohana ai i nā pono API.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),