Ku hambanisiwa ka swilo

Bootstrap yi katsa nxaxamelo wo anama wa titlilasi ta vukorhokeri bya margin lebyi hlamulaka hi shorthand na padding ku cinca xivumbeko xa elemente.

Ndlela leyi swi tirhaka ha yona

Avela responsive-friendly marginkumbe paddingvalues eka element kumbe subset ya matlhelo ya yona na titlilasi ta shorthand. Ku katsa na nseketelo wa swihlawulekisi swa munhu hi xiyexe, swihlawulekisi hinkwaswo, na swihlawulekisi leswi yimisiweke na leswi nga etlhelo. Titlilasi ti akiwile ku suka eka mepe wa Sass wa ntolovelo ku sukela eka .25remku ya eka 3rem.

Notation

Switirhisiwa swa ku hambanyisa leswi tirhaka eka tindhawu hinkwato to wisa, ku suka eka xsku ya eka xl, a swi na xifunengeto xa swiphemu swo tsema eka swona. Leswi swi vangiwa hikuva titlilasi teto ti tirhisiwa ku suka min-width: 0na le henhla, naswona xisweswo a ti bohiwi hi xivutiso xa vuhangalasi bya mahungu. Hambiswiritano, swiphemu leswi saleke swa ku tshoveka swi katsa xifunengeto xa ku tshoveka.

Titlilasi ti thyiwile mavito hi ku tirhisa xivumbeko {property}{sides}-{size}xa xsna {property}{sides}-{breakpoint}-{size}xa sm, md, lg, na xl.

Laha nhundzu yi nga yin’wana ya:

m- ya titlilasi leti vekakamargin
p- ya titlilasi leti vekakapadding

Laha matlhelo ku nga rin’wana ra:

t- ya titlilasi leti vekaka margin-topkumbepadding-top
b- ya titlilasi leti vekaka margin-bottomkumbepadding-bottom
l- ya titlilasi leti vekaka margin-leftkumbepadding-left
r- ya titlilasi leti vekaka margin-rightkumbepadding-right
x- eka titlilasi leti vekaka havumbirhi bya swona *-leftna*-right
y- eka titlilasi leti vekaka havumbirhi bya swona *-topna*-bottom
blank - ya titlilasi leti vekaka a marginkumbe paddingeka matlhelo hinkwawo ya 4 ya elemente

Laha sayizi yi nga yin’wana ya:

0- eka titlilasi leti herisaka marginkumbe paddinghi ku yi veka eka0
1- (hi ku tiyimisela) eka titlilasi leti vekaka marginkumbe paddingku$spacer * .25
2- (hi ku tiyimisela) eka titlilasi leti vekaka marginkumbe paddingku$spacer * .5
3- (hi ku tiyimisela) eka titlilasi leti vekaka marginkumbe paddingku$spacer
4- (hi ku tiyimisela) eka titlilasi leti vekaka marginkumbe paddingku$spacer * 1.5
5- (hi ku tiyimisela) eka titlilasi leti vekaka marginkumbe paddingku$spacer * 3
auto- ya titlilasi leti vekaka marginku auto

(U nga engetela vukulu byin’wana hi ku engetela swilo leswi nghenisiweke eka $spacersxihlawulekisi xa mepe wa Sass.)

Swikombiso

Hi leswi swikombiso swin’wana leswi yimelaka titlilasi leti:

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

Ku vekiwa exikarhi ka horizontal

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

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

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1, 2, 3, 4, 5). These utilities are ideal for customizing grid column gutters across breakpoints.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:

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

Hi lexi xikombiso xa ku lulamisa giridi ya Bootstrap eka ndhawu yo mdwisa ya le xikarhi ( ) na le henhla. Hi engetele .colpadding hi .px-md-5ivi hi counteract sweswo hi .mx-md-n5on the parent .row.

Ku padding ka kholomo ya ntolovelo

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