in English

ഗട്ടറുകൾ

നിങ്ങളുടെ നിരകൾക്കിടയിലുള്ള പാഡിംഗാണ് ഗട്ടറുകൾ, ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിൽ റെസ്‌പോൺസിവ് ആയി ഇടം നൽകാനും ഉള്ളടക്കം വിന്യസിക്കാനും ഉപയോഗിക്കുന്നു.

ഈ പേജിൽ

അവർ എങ്ങനെ പ്രവർത്തിക്കുന്നു

തിരശ്ചീനമായി സൃഷ്ടിച്ച കോളം ഉള്ളടക്കങ്ങൾക്കിടയിലുള്ള വിടവുകളാണ് ഗട്ടറുകൾ padding. ഞങ്ങൾ ഓരോ നിരയിലും സജ്ജീകരിച്ച് padding-right, ഉള്ളടക്കം വിന്യസിക്കുന്നതിന് ഓരോ വരിയുടെയും തുടക്കത്തിലും അവസാനത്തിലും അത് ഓഫ്സെറ്റ് ചെയ്യാൻ padding-leftനെഗറ്റീവ് ഉപയോഗിക്കുന്നു .margin
1.5remഗട്ടറുകൾ ( 24px) വീതിയിൽ ആരംഭിക്കുന്നു . പാഡിംഗ്, മാർജിൻ സ്‌പെയ്‌സർ സ്കെയിലുമായി ഞങ്ങളുടെ ഗ്രിഡ് പൊരുത്തപ്പെടുത്താൻ ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു .
ഗട്ടറുകൾ പ്രതികരണമായി ക്രമീകരിക്കാൻ കഴിയും. തിരശ്ചീന ഗട്ടറുകൾ, ലംബ ഗട്ടറുകൾ, എല്ലാ ഗട്ടറുകൾ എന്നിവയും പരിഷ്‌ക്കരിക്കുന്നതിന് ബ്രേക്ക്‌പോയിന്റ്-നിർദ്ദിഷ്ട ഗട്ടർ ക്ലാസുകൾ ഉപയോഗിക്കുക.

തിരശ്ചീനമായ ഗട്ടറുകൾ

.gx-*തിരശ്ചീന ഗട്ടറിന്റെ വീതി നിയന്ത്രിക്കാൻ ക്ലാസുകൾ ഉപയോഗിക്കാം. പൊരുത്തമുള്ള പാഡിംഗ് യൂട്ടിലിറ്റി ഉപയോഗിച്ച് അനാവശ്യ ഓവർഫ്ലോ ഒഴിവാക്കാൻ വലിയ ഗട്ടറുകൾ ഉപയോഗിക്കുകയാണെങ്കിൽ .containerഅല്ലെങ്കിൽ .container-fluidപാരന്റ് ക്രമീകരിക്കേണ്ടി വന്നേക്കാം. ഉദാഹരണത്തിന്, ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ ഞങ്ങൾ പാഡിംഗ് വർദ്ധിപ്പിച്ചു .px-4:

ഇഷ്‌ടാനുസൃത കോളം പാഡിംഗ്

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ക്ലാസിനൊപ്പം ഒരു റാപ്പർ ചേർക്കുക എന്നതാണ് മറ്റൊരു പരിഹാരം .row:.overflow-hidden

ഇഷ്‌ടാനുസൃത കോളം പാഡിംഗ്

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ലംബമായ ഗട്ടറുകൾ

.gy-*നിരകൾ പുതിയ വരകളിലേക്ക് പൊതിയുമ്പോൾ ഒരു വരിയിൽ ലംബമായ ഗട്ടർ വീതി നിയന്ത്രിക്കാൻ ക്ലാസുകൾ ഉപയോഗിക്കാം. .rowതിരശ്ചീന ഗട്ടറുകൾ പോലെ, ലംബമായ ഗട്ടറുകൾ ഒരു പേജിന്റെ അവസാനത്തിൽ കുറച്ച് ഓവർഫ്ലോയ്ക്ക് കാരണമാകും . ഇത് സംഭവിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ക്ലാസിനൊപ്പം ഒരു റാപ്പർ .rowചേർക്കുക .overflow-hidden:

ഇഷ്‌ടാനുസൃത കോളം പാഡിംഗ്

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

തിരശ്ചീനവും ലംബവുമായ ഗട്ടറുകൾ

.g-*തിരശ്ചീന ഗട്ടർ വീതി നിയന്ത്രിക്കാൻ ക്ലാസുകൾ ഉപയോഗിക്കാം, ഇനിപ്പറയുന്ന ഉദാഹരണത്തിനായി ഞങ്ങൾ ഒരു ചെറിയ ഗട്ടർ വീതി ഉപയോഗിക്കുന്നു, അതിനാൽ .overflow-hiddenറാപ്പർ ക്ലാസ് ചേർക്കേണ്ട ആവശ്യമില്ല.

ഇഷ്‌ടാനുസൃത കോളം പാഡിംഗ്

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

നിര നിരകൾ ഗട്ടറുകൾ

വരി നിരകളിലേക്ക് ഗട്ടർ ക്ലാസുകളും ചേർക്കാവുന്നതാണ് . ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, ഞങ്ങൾ പ്രതികരിക്കുന്ന വരി നിരകളും പ്രതികരിക്കുന്ന ഗട്ടർ ക്ലാസുകളും ഉപയോഗിക്കുന്നു.

വരി നിര

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

ഗട്ടറുകളില്ല

ഞങ്ങളുടെ മുൻ‌നിർവ്വചിച്ച ഗ്രിഡ് ക്ലാസുകളിലെ നിരകൾക്കിടയിലുള്ള ഗട്ടറുകൾ ഉപയോഗിച്ച് നീക്കം ചെയ്യാൻ കഴിയും .g-0. ഇത് എല്ലാ ഉടനടി ചിൽഡ്രൻ കോളങ്ങളിൽ നിന്നും marginനെഗറ്റീവുകളും തിരശ്ചീനവും നീക്കംചെയ്യുന്നു .row.padding

എഡ്ജ് ടു എഡ്ജ് ഡിസൈൻ വേണോ? ഓവർഫ്ലോ തടയാൻ രക്ഷിതാവിനെ ഡ്രോപ്പ് ചെയ്യുക .containerഅല്ലെങ്കിൽ അതിലേക്ക് .container-fluidചേർക്കുക .mx-0..row

പ്രായോഗികമായി, ഇത് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് ഇതാ. മറ്റെല്ലാ മുൻനിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകളിലും (കോളം വീതികൾ, പ്രതികരിക്കുന്ന ശ്രേണികൾ, പുനഃക്രമീകരിക്കലുകൾ എന്നിവയും അതിലേറെയും ഉൾപ്പെടെ) നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കുന്നത് തുടരാനാകുമെന്ന് ശ്രദ്ധിക്കുക.

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ഗട്ടറുകൾ മാറ്റുക

$guttersസാസ് മാപ്പിൽ നിന്ന് പാരമ്പര്യമായി ലഭിച്ച സാസ് മാപ്പിൽ നിന്നാണ് ക്ലാസുകൾ നിർമ്മിച്ചിരിക്കുന്നത് $spacers.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);