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
празно - за класи кои поставуваат a 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- за класи кои го поставуваат на marginauto

(Можете да додадете повеќе големини со додавање записи во $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;
}

Хоризонтално центрирање

Дополнително, Bootstrap вклучува и .mx-autoкласа за хоризонтално центрирање на содржината на ниво на блок со фиксна ширина - односно содржина што има display: blockи widthмножество - со поставување на хоризонталните маргини на auto.

Центриран елемент

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