Размак

Боотстрап укључује широк спектар услужних класа маргина, паддинга и празнина које реагују на стенографију ради модификације изгледа елемента.

На овој страници

Маргина и паддинг

Доделите прилагођене marginили paddingвредности елементу или подскупу његових страна са скраћеним класама. Укључује подршку за појединачна својства, сва својства и вертикална и хоризонтална својства. Класе су изграђене од подразумеване Сасс мапе у распону од .25remдо 3rem.

Користите модул изгледа ЦСС Грид? Уместо тога, размислите о коришћењу услужног програма гап .

Нотација

Услужни програми за размак који се примењују на све тачке прекида, од xsдо xxl, немају скраћеницу тачке прекида у себи. То је зато што се те класе примењују од min-width: 0и навише и стога нису везане медијским упитом. Преостале тачке прекида, међутим, укључују скраћеницу тачке прекида.

Класе се именују користећи формат {property}{sides}-{size}за xsи {property}{sides}-{breakpoint}-{size}за sm, md, lg, xlи xxl.

Где је имовина једно од:

m- за класе које постављајуmargin
p- за класе које постављајуpadding

Где је страна једна од:

t- за часове који постављају margin-topилиpadding-top
b- за часове који постављају margin-bottomилиpadding-bottom
s- (почетак) за класе које се постављају margin-leftили padding-leftу ЛТР, margin-rightили padding-rightу РТЛ
e- (крај) за класе које постављају margin-rightили padding-rightу ЛТР, margin-leftили padding-leftу РТЛ
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променљиву мапе Сасс.)

Примери

Ево неколико репрезентативних примера ових класа:

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

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

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

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

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

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

У ЦСС-у, marginсвојства могу да користе негативне вредности ( paddingне могу). Ове негативне маргине су подразумевано онемогућене , али се могу омогућити у Сасс-у подешавањем $enable-negative-margins: true.

Синтакса је скоро иста као подразумевани, позитивни услужни програми маргине, али са додатком nпре захтеване величине. Ево примера класе која је супротна од .mt-1:

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

Гап

Када користите display: grid, можете користити gapуслужне програме на родитељском мрежном контејнеру. Ово може уштедети на додавању помоћних маргина појединачним ставкама мреже (деца display: gridконтејнера). Гап услужни програми подразумевано одговарају и генеришу се преко нашег АПИ-ја за услужне програме, на основу $spacersСасс мапе.

Ставка мреже 1

Ставка мреже 2

Ставка мреже 3

хтмл

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

Подршка укључује прилагодљиве опције за све тачке прекида мреже Боотстрап-а, као и шест величина са $spacersмапе ( 0– 5). Не постоји .gap-autoкласа корисности јер је заправо иста као .gap-0.

Сасс

Мапс

Услужни програми за размак се декларишу преко Сасс мапе, а затим се генеришу помоћу нашег АПИ-ја за услужне програме.

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

Утилитиес АПИ

Услужни програми за размак су декларисани у нашем АПИ-ју за услужне програме у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

    "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
    ),