గట్టర్స్
బూట్స్ట్రాప్ గ్రిడ్ సిస్టమ్లోని కంటెంట్ను ప్రతిస్పందనాత్మకంగా ఖాళీ చేయడానికి మరియు సమలేఖనం చేయడానికి ఉపయోగించే మీ నిలువు వరుసల మధ్య ఉండే ప్యాడింగ్లు గట్టర్లు.
వారు ఎలా పని చేస్తారు
-
గట్టర్లు నిలువు కంటెంట్ మధ్య ఖాళీలు, క్షితిజ సమాంతరంగా సృష్టించబడతాయి
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,
);