Spațiere

Bootstrap include o gamă largă de clase de utilitate pentru marjă de răspuns scurtă, umplutură și decalaj pentru a modifica aspectul unui element.

Pe aceasta pagina

Marja și umplutură

Atribuiți valori responsive-friendly marginsau paddingunui element sau unui subset al laturilor sale cu clase scurte. Include suport pentru proprietăți individuale, toate proprietățile și proprietățile verticale și orizontale. Clasele sunt construite dintr-o hartă Sass implicită, de la .25rempână la 3rem.

Folosești modulul de aspect CSS Grid? Luați în considerare utilizarea utilitarului gap .

Notaţie

Utilitarele de spațiere care se aplică tuturor punctelor de întrerupere, de la xspână la xxl, nu au abrevierea punctului de întrerupere. Acest lucru se datorează faptului că acele clase sunt aplicate de la min-width: 0și în sus și, prin urmare, nu sunt legate de o interogare media. Punctele de întrerupere rămase, totuși, includ o abreviere a punctului de întrerupere.

Clasele sunt denumite folosind formatul {property}{sides}-{size}pentru xsși {property}{sides}-{breakpoint}-{size}pentru sm, md, lg, xlși xxl.

Acolo unde proprietatea este una dintre:

m- pentru clasele care se stabilescmargin
p- pentru clasele care se stabilescpadding

Unde laturile este una dintre:

t- pentru clasele care stabilesc margin-topsaupadding-top
b- pentru clasele care stabilesc margin-bottomsaupadding-bottom
s- (start) pentru clasele care se setează margin-leftsau padding-leftîn LTR, margin-rightsau padding-rightîn RTL
e- (sfârșit) pentru clasele care setează margin-rightsau padding-rightîn LTR, margin-leftsau padding-leftîn RTL
x- pentru clasele care stabilesc atât *-leftși*-right
y- pentru clasele care stabilesc atât *-topși*-bottom
gol - pentru clasele care stabilesc a marginsau paddingpe toate cele 4 laturi ale elementului

Unde dimensiunea este una dintre:

0- pentru clasele care elimină marginsau paddingprin setarea la0
1- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * .25
2- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * .5
3- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer
4- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * 1.5
5- (în mod implicit) pentru clasele care setează marginsau paddingla$spacer * 3
auto- pentru clasele care setează marginautomat

(Puteți adăuga mai multe dimensiuni adăugând intrări la $spacersvariabila hartă Sass.)

Exemple

Iată câteva exemple reprezentative ale acestor clase:

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

Centrare orizontală

În plus, Bootstrap include și o .mx-autoclasă pentru centrarea orizontală a conținutului la nivel de bloc cu lățime fixă - adică conținut care are display: blockși un widthset - prin setarea marginilor orizontale la auto.

Element centrat

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

Marja negativă

În CSS, marginproprietățile pot utiliza valori negative ( paddingnu pot). Aceste marje negative sunt dezactivate implicit , dar pot fi activate în Sass prin setare $enable-negative-margins: true.

Sintaxa este aproape aceeași cu utilitățile implicite, cu marjă pozitivă, dar cu adăugarea de nînainte de dimensiunea cerută. Iată un exemplu de clasă care este opusul .mt-1:

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

Decalaj

Când utilizați display: grid, puteți utiliza gaputilitățile din containerul rețelei părinte. Acest lucru poate economisi nevoia de a adăuga utilități de marjă la elementele individuale ale rețelei (copiii unui display: gridcontainer). Utilitarele Gap sunt receptive în mod implicit și sunt generate prin intermediul API-ului nostru de utilitare, pe baza $spacershărții Sass.

Elementul grilei 1

Elementul grilă 2

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

Asistența include opțiuni de răspuns pentru toate punctele de întrerupere ale grilei Bootstrap, precum și șase dimensiuni de pe $spacershartă ( 0– 5). Nu există nicio .gap-autoclasă de utilitate, deoarece este efectiv aceeași cu .gap-0.

Sass

Hărți

Utilitățile de spațiere sunt declarate prin intermediul hărții Sass și apoi generate cu API-ul nostru de utilitare.

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

Utilitarele de spațiere sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

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