in English

Mipata

Bootstrap imaphatikizapo mitundu ingapo yoyankha mwachidule, padding, ndi makalasi ogwiritsira ntchito gap kuti asinthe mawonekedwe a chinthu.

Patsamba ili

Margin ndi padding

Perekani zovomerezeka marginkapena paddingzofunikira ku chinthu kapena kagawo kakang'ono ka mbali zake ndi makalasi achidule. Zimaphatikizapo chithandizo cha katundu aliyense payekha, katundu yense, ndi zowoneka ndi zopingasa. Maphunziro amapangidwa kuchokera pamapu okhazikika a Sass kuyambira .25remmpaka 3rem.

Mukugwiritsa ntchito gawo la CSS Grid? Yesani kugwiritsa ntchito gap utility m'malo mwake.

Kuzindikira

Zida zopangira masitayilo zomwe zimagwira ntchito pama breakpoints onse, kuyambira xsmpaka xxl, zilibe chidule cha breakpoint mwa iwo. Izi ndichifukwa choti makalasiwo amagwiritsidwa ntchito kuchokera min-width: 0ndi mmwamba, motero samamangidwa ndi funso lazama media. Zotsalira zotsalira, komabe, zikuphatikiza chidule cha breakpoint.

Maphunzirowa amatchulidwa pogwiritsa ntchito mawonekedwe {property}{sides}-{size}a xs, , , , ndi .{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

Kumene katundu ndi imodzi mwa:

m- kwa makalasi omwe akhazikitsidwamargin
p- kwa makalasi omwe akhazikitsidwapadding

Kumene mbali ndi imodzi mwa:

t- kwa makalasi omwe amakhazikitsa margin-topkapenapadding-top
b- kwa makalasi omwe amakhazikitsa margin-bottomkapenapadding-bottom
s- (yambani) pamakalasi omwe amakhala margin-leftkapena padding-leftmu LTR, margin-rightkapena padding-rightmu RTL
e- (mapeto) pamakalasi omwe amakhala margin-rightkapena padding-rightmu LTR, margin-leftkapena padding-leftmu RTL
x- kwa makalasi omwe amakhazikitsa onse *-leftndi*-right
y- kwa makalasi omwe amakhazikitsa onse *-topndi*-bottom
opanda kanthu - m'makalasi omwe amayika mbali marginzonse paddingzinayi za chinthucho

Kumene kukula ndi chimodzi mwa:

0- m'makalasi omwe amachotsa marginkapena paddingkuyiyika0
1- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * .25
2- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * .5
3- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer
4- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * 1.5
5- (mwachisawawa) pamakalasi omwe amakhazikitsa marginkapena paddingku$spacer * 3
auto- pamakalasi omwe amakhazikitsa marginauto

(Mutha kuwonjezera kukula kwake powonjezera zolemba $spacerspamapu a Sass.)

Zitsanzo

Nazi zitsanzo zoimira makalasi awa:

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

Chopingasa pakati

Kuphatikiza apo, Bootstrap imaphatikizansopo .mx-autokalasi yokhazikika yopingasa mulingo wa block - ndiye kuti, zomwe zili display: blockndi widthseti - pokhazikitsa malire opingasa mpaka auto.

Chigawo chapakati

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

Mtsinje wopanda pake

Mu CSS, marginkatundu amatha kugwiritsa ntchito zinthu zolakwika ( paddingsangathe). Mitsinje yolakwika iyi imayimitsidwa mwachisawawa , koma ikhoza kuyatsidwa mu Sass pokhazikitsa $enable-negative-margins: true.

Mawuwo ali pafupifupi ofanana ndi osasinthika, abwino am'mphepete mwazinthu zofunikira, koma ndikuwonjezera nkukula kwake komwe kusanachitike. Nayi kalasi yachitsanzo yomwe ili yosiyana ndi .mt-1:

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

Kusiyana

Mukamagwiritsa ntchito display: grid, mutha kugwiritsa gapntchito zida zomwe zili pachidebe cha grid ya makolo. Izi zitha kupulumutsa pakuwonjezera zida zam'mphepete kuzinthu zamtundu uliwonse (ana a display: gridchidebe). Zida za Gap zimagwira ntchito mwachisawawa, ndipo zimapangidwa kudzera pazida zathu za API, kutengera $spacersmapu a Sass.

Grid chinthu 1

Grid chinthu 2

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

Thandizo limaphatikizapo njira zoyankhira pamagulu onse a Bootstrap a gridi, komanso masaizi asanu ndi limodzi $spacerspamapu ( 0- 5). Palibe .gap-autogulu lothandizira chifukwa ndilofanana ndi .gap-0.

Sass

Mapu

Zothandizira zapakati zimalengezedwa kudzera pamapu a Sass kenako zimapangidwa ndi zida zathu za API.

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

Utilities API

Zothandizira patali zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito 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
    ),