ગટર
ગટર એ તમારા કૉલમ વચ્ચેનું પેડિંગ છે, જેનો ઉપયોગ બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં પ્રતિભાવપૂર્વક જગ્યા અને સામગ્રીને સંરેખિત કરવા માટે થાય છે.
તેઓ કેવી રીતે કામ કરે છે
-
ગટર એ સ્તંભની સામગ્રી વચ્ચેનું અંતર છે, જે આડી દ્વારા બનાવેલ છે
padding
. અમે દરેક કૉલમ પરpadding-right
અને સેટ કરીએ છીએ, અને સામગ્રીને સંરેખિત કરવા માટે દરેક પંક્તિની શરૂઆતમાં અને અંતે તેને ઑફસેટ કરવા માટેpadding-left
નકારાત્મકનો ઉપયોગ કરીએ છીએ.margin
-
1.5rem
ગટર (24px
) પહોળાથી શરૂ થાય છે . આ અમને અમારા ગ્રીડને પેડિંગ અને માર્જિન સ્પેસર સ્કેલ સાથે મેચ કરવાની મંજૂરી આપે છે. -
ગટરને પ્રતિભાવપૂર્વક ગોઠવી શકાય છે. આડી ગટર, ઊભી ગટર અને તમામ ગટરમાં ફેરફાર કરવા માટે બ્રેકપોઇન્ટ-વિશિષ્ટ ગટર વર્ગોનો ઉપયોગ કરો.
આડી ગટર
.gx-*
વર્ગોનો ઉપયોગ આડી ગટરની પહોળાઈને નિયંત્રિત કરવા માટે થઈ શકે છે. જો મેચિંગ પેડિંગ યુટિલિટીનો ઉપયોગ કરીને અનિચ્છનીય ઓવરફ્લો ટાળવા માટે મોટા ગટરનો ઉપયોગ કરવામાં આવે તો તેને .container
અથવા પેરેન્ટને એડજસ્ટ કરવાની જરૂર પડી શકે છે. .container-fluid
ઉદાહરણ તરીકે, નીચેના ઉદાહરણમાં અમે આની સાથે પેડિંગ વધાર્યું છે .px-4
:
<div class="container px-4">
<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
<div class="container overflow-hidden">
<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
વર્ગની આસપાસ રેપર ઉમેરો :
<div class="container overflow-hidden">
<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
વર્ગોનો ઉપયોગ આડી ગટરની પહોળાઈને નિયંત્રિત કરવા માટે થઈ શકે છે, નીચેના ઉદાહરણ માટે આપણે નાની ગટરની પહોળાઈનો ઉપયોગ કરીએ છીએ, તેથી રેપર વર્ગ ઉમેરવાની જરૂર રહેશે નહીં .
<div class="container">
<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>
પંક્તિ કૉલમ ગટર
પંક્તિના સ્તંભોમાં ગટર વર્ગો પણ ઉમેરી શકાય છે . નીચેના ઉદાહરણમાં, અમે રિસ્પોન્સિવ પંક્તિ કૉલમ્સ અને રિસ્પોન્સિવ ગટર ક્લાસનો ઉપયોગ કરીએ છીએ.
<div class="container">
<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
.
વ્યવહારમાં, તે કેવી રીતે દેખાય છે તે અહીં છે. નોંધ કરો કે તમે અન્ય તમામ પૂર્વવ્યાખ્યાયિત ગ્રીડ વર્ગો (કૉલમની પહોળાઈ, પ્રતિભાવ સ્તરો, પુનઃક્રમાંકન અને વધુ સહિત) સાથે આનો ઉપયોગ કરવાનું ચાલુ રાખી શકો છો.
<div class="row g-0">
<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,
);