ગટર

ગટર એ તમારા કૉલમ વચ્ચેનું પેડિંગ છે, જેનો ઉપયોગ બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં પ્રતિભાવપૂર્વક જગ્યા અને સામગ્રીને સંરેખિત કરવા માટે થાય છે.

આ પૃષ્ઠ પર

તેઓ કેવી રીતે કામ કરે છે

ગટર એ સ્તંભની સામગ્રી વચ્ચેનું અંતર છે, જે આડી દ્વારા બનાવેલ છે 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,
);