Проред

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>

Негативна маржа

Во CSS, marginсвојствата можат да користат негативни вредности ( paddingне може). Почнувајќи од 4.2, додадовме алатки за негативна маргина за секоја ненулта цел број наведена погоре (на пр., 1, 2, 3, 4, 5). Овие алатки се идеални за приспособување на олуците на мрежните столбови низ точките на прекин.

Синтаксата е речиси иста како стандардните алатки со позитивна маргина, но со додавање на nпред бараната големина. Еве пример класа што е спротивна на .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>