in English

Проред

Bootstrap вклучува широк опсег на класи на маргина, пополнување и празнини кои одговараат на стенографија за да го модифицираат изгледот на елементот.

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

Маргина и баласт

Доделете респонзивни marginили paddingвредности на елемент или подмножество од неговите страни со класи на стенографии. Вклучува поддршка за поединечни својства, сите својства и вертикални и хоризонтални својства. Класите се изградени од стандардна Sass мапа која се движи од .25remдо 3rem.

Го користите модулот за распоред на CSS Grid? Наместо тоа, размислете за користење на алатката gap .

Нотација

Услужните програми за проред што важат за сите точки на прекин, од 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во LTR, margin-rightили padding-rightво RTL
e- (крај) за класи што се поставуваат margin-rightили padding-rightво LTR, margin-leftили padding-leftво RTL
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;
}

.ms-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не може). Овие негативни маргини се стандардно оневозможени , но може да се овозможат во Sass со поставување $enable-negative-margins: true.

Синтаксата е речиси иста како стандардните алатки со позитивна маргина, но со додавање на nпред бараната големина. Еве пример класа што е спротивна на .mt-1:

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

Јаз

Кога користите display: grid, можете да ги користите gapкомуналните услуги на контејнерот на матичната мрежа. Ова може да заштеди од потребата да се додадат алатки за маргина на поединечни ставки на мрежата (деца на display: gridконтејнер). Gap utilities стандардно реагираат и се генерираат преку нашите Utilities API, базирани на $spacersкартата Sass.

Решетка ставка 1

Решетка ставка 2

Решетка ставка 3

html

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

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

Сас

Карти

Услужните програми за растојание се декларирани преку мапата Sass, а потоа се генерираат со нашите API за комунални услуги.

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

Utilities API

Услужните програми за проред се декларирани во нашите Utilities API во scss/_utilities.scss. Научете како да ги користите Utilities API.

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