Source

Фосила

Bootstrap доираи васеи маржаи стенографияи ҷавобӣ ва синфҳои утилитаҳои пуркунии пурборро барои тағир додани намуди элемент дар бар мегирад.

Он чӣ гуна кор мекунад

marginБа унсур ё paddingзермаҷмӯи паҳлӯҳои он бо синфҳои стенограммавӣ арзишҳои мувофиқ таъин кунед . Дастгирии хосиятҳои инфиродӣ, ҳама хосиятҳо ва амудӣ ва уфуқиро дар бар мегирад. Синфҳо аз харитаи пешфарзии Sass сохта шудаанд, ки .25remаз 3rem.

Нота

Утилитҳои фосилавӣ, ки ба ҳама нуқтаҳои қатъшавӣ, аз xsто xl, дахл доранд, дар онҳо ихтисораи нуқта надоранд. Сабаб дар он аст, ки ин синфҳо аз min-width: 0ва боло татбиқ карда мешаванд ва аз ин рӯ бо дархости медиа баста намешаванд. Бо вуҷуди ин, нуқтаҳои қатъшавии боқимонда ихтисораи нуқтаро дар бар мегиранд.

Синфҳо бо истифода аз формат {property}{sides}-{size}барои xsва {property}{sides}-{breakpoint}-{size}барои sm, md, lg, ва xlномида мешаванд.

Дар куҷо амвол яке аз:

m- барои синфҳои муқарраршудаmargin
p- барои синфҳои муқарраршудаpadding

Дар куҷо ҷонибҳо яке аз:

t- барои синфҳое, ки муқаррар margin-topмекунанд ёpadding-top
b- барои синфҳое, ки муқаррар margin-bottomмекунанд ёpadding-bottom
l- барои синфҳое, ки муқаррар margin-leftмекунанд ёpadding-left
r- барои синфҳое, ки муқаррар margin-rightмекунанд ёpadding-right
x- барои синфҳое, ки ҳарду *-leftва*-right
y- барои синфҳое, ки ҳарду *-topва*-bottom
холӣ - барои синфҳое, ки marginдар paddingҳама 4 тарафи элемент муқаррар карда шудаанд

Дар куҷо андоза яке аз:

0- барои синфҳое, ки бартараф мекунанд marginё paddingбо гузоштани он0
1- (бо нобаёнӣ) барои синфҳое, ки marginё paddingба$spacer * .25
2- (бо нобаёнӣ) барои синфҳое, ки marginё paddingба$spacer * .5
3- (бо нобаёнӣ) барои синфҳое, ки marginё paddingба$spacer
4- (бо нобаёнӣ) барои синфҳое, ки marginё paddingба$spacer * 1.5
5- (бо нобаёнӣ) барои синфҳое, ки marginё paddingба$spacer * 3
auto- барои синфҳое, ки marginба худкор муқаррар кардаанд

(Шумо метавонед бо илова кардани сабтҳо ба $spacersтағирёбандаи харитаи Sass андозаи бештар илова кунед.)

Мисолхо

Инҳоянд чанд намунаи намояндагии ин синфҳо:

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

Марказгузории уфуқӣ

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

Ин аст мисоли танзим кардани шабакаи Bootstrap дар нуқтаи миёна ( md) ва болотар. Мо .colпуркуниро бо волидайн зиёд кардем .px-md-5ва сипас ба он муқобилат кардем ..mx-md-n5.row

Ҷойгиркунии сутуни фармоишӣ

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