గట్టర్స్

బూట్‌స్ట్రాప్ గ్రిడ్ సిస్టమ్‌లోని కంటెంట్‌ను ప్రతిస్పందనాత్మకంగా ఖాళీ చేయడానికి మరియు సమలేఖనం చేయడానికి ఉపయోగించే మీ నిలువు వరుసల మధ్య ఉన్న పాడింగ్‌ను గట్టర్‌లు అంటారు.

ఈ పేజీలో

వారు ఎలా పని చేస్తారు

గట్టర్‌లు నిలువు కంటెంట్ మధ్య ఖాళీలు, క్షితిజ సమాంతరంగా సృష్టించబడతాయి 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.

ఆచరణలో, ఇది ఎలా కనిపిస్తుందో ఇక్కడ ఉంది. మీరు దీన్ని అన్ని ఇతర ముందే నిర్వచించిన గ్రిడ్ తరగతులతో (కాలమ్ వెడల్పులు, ప్రతిస్పందించే స్థాయిలు, రీఆర్డర్‌లు మరియు మరిన్నింటితో సహా) ఉపయోగించడం కొనసాగించవచ్చని గమనించండి.

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

.col-6 .col-md-4

<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,
);