Source

గ్రిడ్ వ్యవస్థ

పన్నెండు కాలమ్ సిస్టమ్, ఐదు డిఫాల్ట్ రెస్పాన్సివ్ టైర్లు, సాస్ వేరియబుల్స్ మరియు మిక్సిన్‌లు మరియు డజన్ల కొద్దీ ముందే నిర్వచించిన తరగతులకు ధన్యవాదాలు అన్ని ఆకారాలు మరియు పరిమాణాల లేఅవుట్‌లను రూపొందించడానికి మా శక్తివంతమైన మొబైల్-ఫస్ట్ ఫ్లెక్స్‌బాక్స్ గ్రిడ్‌ను ఉపయోగించండి.

అది ఎలా పని చేస్తుంది

బూట్‌స్ట్రాప్ యొక్క గ్రిడ్ సిస్టమ్ కంటెంట్‌ను లేఅవుట్ చేయడానికి మరియు సమలేఖనం చేయడానికి కంటైనర్లు, అడ్డు వరుసలు మరియు నిలువు వరుసలను ఉపయోగిస్తుంది. ఇది ఫ్లెక్స్‌బాక్స్‌తో నిర్మించబడింది మరియు పూర్తిగా ప్రతిస్పందిస్తుంది. క్రింద ఒక ఉదాహరణ మరియు గ్రిడ్ ఎలా కలిసి వస్తుందనే దాని గురించి లోతైన పరిశీలన.

ఫ్లెక్స్‌బాక్స్‌కి కొత్త లేదా తెలియదా? నేపథ్యం, పదజాలం, మార్గదర్శకాలు మరియు కోడ్ స్నిప్పెట్‌ల కోసం ఈ CSS ట్రిక్స్ ఫ్లెక్స్‌బాక్స్ గైడ్‌ని చదవండి .

మూడు నిలువు వరుసలలో ఒకటి

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ఎగువ ఉదాహరణ మా ముందే నిర్వచించిన గ్రిడ్ తరగతులను ఉపయోగించి చిన్న, మధ్యస్థ, పెద్ద మరియు అదనపు పెద్ద పరికరాలలో మూడు సమాన-వెడల్పు నిలువు వరుసలను సృష్టిస్తుంది. ఆ నిలువు వరుసలు పేరెంట్‌తో ఉన్న పేజీలో మధ్యలో ఉంటాయి .container.

దీన్ని విచ్ఛిన్నం చేయడం, ఇది ఎలా పని చేస్తుందో ఇక్కడ ఉంది:

కంటైనర్‌లు మీ సైట్ కంటెంట్‌లను మధ్యలో ఉంచడానికి మరియు క్షితిజ సమాంతరంగా ప్యాడ్ చేయడానికి ఒక మార్గాన్ని అందిస్తాయి. .containerప్రతిస్పందించే పిక్సెల్ వెడల్పు .container-fluidకోసం లేదా width: 100%అన్ని వీక్షణపోర్ట్ మరియు పరికర పరిమాణాల కోసం ఉపయోగించండి .
అడ్డు వరుసలు నిలువు వరుసలకు రేపర్‌లు. ప్రతి నిలువు వరుస paddingవాటి మధ్య ఖాళీని నియంత్రించడానికి క్షితిజ సమాంతర (గట్టర్ అని పిలుస్తారు) కలిగి ఉంటుంది. ఇది paddingప్రతికూల మార్జిన్‌లతో అడ్డు వరుసలపై ప్రతిఘటించబడుతుంది. ఈ విధంగా, మీ నిలువు వరుసలలోని మొత్తం కంటెంట్ ఎడమ వైపుకు దృశ్యమానంగా సమలేఖనం చేయబడుతుంది.
గ్రిడ్ లేఅవుట్‌లో, కంటెంట్ తప్పనిసరిగా నిలువు వరుసలలో ఉంచబడాలి మరియు నిలువు వరుసలు మాత్రమే తక్షణ పిల్లలు కావచ్చు.
ఫ్లెక్స్‌బాక్స్‌కు ధన్యవాదాలు, పేర్కొనబడని గ్రిడ్ నిలువు widthవరుసలు సమాన వెడల్పు నిలువు వరుసలుగా స్వయంచాలకంగా లేఅవుట్ చేయబడతాయి. ఉదాహరణకు, నాలుగు పర్యాయాలు .col-smస్వయంచాలకంగా చిన్న బ్రేక్ పాయింట్ నుండి 25% వెడల్పుగా ఉంటాయి. మరిన్ని ఉదాహరణల కోసం ఆటో-లేఅవుట్ నిలువు వరుసల విభాగాన్ని చూడండి .
నిలువు వరుసల తరగతులు మీరు ఉపయోగించాలనుకుంటున్న నిలువు వరుసల సంఖ్యను సూచిస్తాయి. కాబట్టి, మీకు మూడు సమాన-వెడల్పు నిలువు వరుసలు కావాలంటే, మీరు ఉపయోగించవచ్చు .col-4.
నిలువు widthవరుసలు శాతాలలో సెట్ చేయబడ్డాయి, కాబట్టి అవి ఎల్లప్పుడూ ద్రవంగా ఉంటాయి మరియు వాటి మాతృ మూలకానికి సంబంధించి పరిమాణంలో ఉంటాయి.
వ్యక్తిగత నిలువు వరుసల మధ్య గట్టర్‌లను సృష్టించడానికి నిలువు వరుసలు క్షితిజ సమాంతరంగా ఉంటాయి, అయినప్పటికీ, మీరు అడ్డు వరుసల నుండి మరియు నిలువు వరుసల నుండి paddingతీసివేయవచ్చు .marginpadding.no-gutters.row
గ్రిడ్‌ను ప్రతిస్పందించేలా చేయడానికి, ఐదు గ్రిడ్ బ్రేక్‌పాయింట్‌లు ఉన్నాయి, ప్రతి రెస్పాన్సివ్ బ్రేక్‌పాయింట్‌కు ఒకటి : అన్ని బ్రేక్‌పాయింట్‌లు (అదనపు చిన్నవి), చిన్నవి, మధ్యస్థం, పెద్దవి మరియు అదనపు పెద్దవి.
గ్రిడ్ బ్రేక్‌పాయింట్‌లు కనీస వెడల్పు మీడియా ప్రశ్నలపై ఆధారపడి ఉంటాయి, అంటే అవి ఒక బ్రేక్‌పాయింట్‌కు మరియు దాని పైన ఉన్న అన్నింటికి వర్తిస్తాయి (ఉదా, .col-sm-4చిన్న, మధ్యస్థ, పెద్ద మరియు అదనపు పెద్ద పరికరాలకు వర్తిస్తుంది, కానీ మొదటి xsబ్రేక్‌పాయింట్ కాదు).
మీరు మరింత సెమాంటిక్ మార్కప్ కోసం ముందే నిర్వచించిన గ్రిడ్ తరగతులు (వంటి .col-4) లేదా సాస్ మిక్సిన్‌లను ఉపయోగించవచ్చు.

కొన్ని HTML మూలకాలను ఫ్లెక్స్ కంటైనర్‌లుగా ఉపయోగించలేకపోవడం వంటి ఫ్లెక్స్‌బాక్స్ చుట్టూ ఉన్న పరిమితులు మరియు బగ్‌ల గురించి తెలుసుకోండి .

గ్రిడ్ ఎంపికలు

బూట్‌స్ట్రాప్ చాలా పరిమాణాలను నిర్వచించడానికి ems లేదా s ని ఉపయోగిస్తుండగా, లు గ్రిడ్ బ్రేక్‌పాయింట్‌లు మరియు కంటైనర్ వెడల్పుల కోసం ఉపయోగించబడతాయి. ఎందుకంటే వీక్షణపోర్ట్ వెడల్పు పిక్సెల్‌లలో ఉంది మరియు ఫాంట్ పరిమాణంతో మారదు .rempx

బూట్‌స్ట్రాప్ గ్రిడ్ సిస్టమ్ యొక్క అంశాలు సులభ పట్టికతో బహుళ పరికరాలలో ఎలా పనిచేస్తాయో చూడండి.

	అదనపు చిన్న <576px	చిన్న ≥576px	మధ్యస్థం ≥768px	పెద్ద ≥992px	అదనపు పెద్ద ≥1200px
గరిష్ట కంటైనర్ వెడల్పు	ఏదీ లేదు (ఆటో)	540px	720px	960px	1140px
తరగతి ఉపసర్గ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# నిలువు వరుసలు	12
గట్టర్ వెడల్పు	30px (నిలువు వరుసలో 15px)
నెస్టబుల్	అవును
కాలమ్ ఆర్డరింగ్	అవును

ఆటో-లేఅవుట్ నిలువు వరుసలు

వంటి స్పష్టమైన సంఖ్య తరగతి లేకుండా సులభంగా కాలమ్ సైజింగ్ కోసం బ్రేక్‌పాయింట్-నిర్దిష్ట కాలమ్ తరగతులను ఉపయోగించండి .col-sm-6.

సమాన-వెడల్పు

ఉదాహరణకు, ఇక్కడ రెండు గ్రిడ్ లేఅవుట్‌లు ఉన్నాయి, ఇవి ప్రతి పరికరానికి మరియు వీక్షణ పోర్ట్‌కి, నుండి xsవరకు వర్తిస్తాయి xl. మీకు అవసరమైన ప్రతి బ్రేక్‌పాయింట్‌కు ఎన్ని యూనిట్-తక్కువ తరగతులను జోడించండి మరియు ప్రతి నిలువు వరుస అదే వెడల్పుగా ఉంటుంది.

2లో 1

2లో 2

3లో 1

3లో 2

3లో 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

సమాన-వెడల్పు బహుళ-లైన్

.w-100మీరు నిలువు వరుసలను కొత్త పంక్తికి విచ్ఛిన్నం చేయాలనుకుంటున్న చోట చొప్పించడం ద్వారా బహుళ పంక్తులను విస్తరించే సమాన-వెడల్పు నిలువు వరుసలను సృష్టించండి . .w-100కొన్ని రెస్పాన్సివ్ డిస్‌ప్లే యుటిలిటీస్‌తో కలపడం ద్వారా బ్రేక్‌లను ప్రతిస్పందించేలా చేయండి .

సఫారి ఫ్లెక్స్‌బాక్స్ బగ్ ఉంది , ఇది స్పష్టమైన flex-basisలేదా border. పాత బ్రౌజర్ సంస్కరణలకు పరిష్కారాలు ఉన్నాయి, కానీ మీ లక్ష్య బ్రౌజర్‌లు బగ్గీ వెర్షన్‌లలోకి రాకపోతే అవి అవసరం లేదు.

కల్

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

ఒక నిలువు వరుస వెడల్పును సెట్ చేస్తోంది

ఫ్లెక్స్‌బాక్స్ గ్రిడ్ నిలువు వరుసల కోసం స్వీయ-లేఅవుట్ అంటే మీరు ఒక నిలువు వరుస వెడల్పును సెట్ చేయవచ్చు మరియు దాని చుట్టూ ఉన్న తోబుట్టువుల నిలువు వరుసలు స్వయంచాలకంగా పరిమాణాన్ని మార్చవచ్చు. మీరు ముందే నిర్వచించిన గ్రిడ్ తరగతులు (క్రింద చూపిన విధంగా), గ్రిడ్ మిక్సిన్‌లు లేదా ఇన్‌లైన్ వెడల్పులను ఉపయోగించవచ్చు. ఇతర నిలువు వరుసలు మధ్య నిలువు వరుస వెడల్పుతో సంబంధం లేకుండా పరిమాణాన్ని మారుస్తాయని గుర్తుంచుకోండి.

3లో 1

3లో 2 (వెడల్పాటి)

3లో 3

3లో 1

3లో 2 (వెడల్పాటి)

3లో 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

వేరియబుల్ వెడల్పు కంటెంట్

col-{breakpoint}-autoవాటి కంటెంట్ యొక్క సహజ వెడల్పు ఆధారంగా నిలువు వరుసల పరిమాణానికి తరగతులను ఉపయోగించండి .

3లో 1

వేరియబుల్ వెడల్పు కంటెంట్

3లో 3

3లో 1

వేరియబుల్ వెడల్పు కంటెంట్

3లో 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ప్రతిస్పందించే తరగతులు

బూట్‌స్ట్రాప్ యొక్క గ్రిడ్ సంక్లిష్టమైన ప్రతిస్పందించే లేఅవుట్‌లను నిర్మించడానికి ఐదు స్థాయిల ముందే నిర్వచించిన తరగతులను కలిగి ఉంటుంది. అదనపు చిన్న, చిన్న, మధ్యస్థ, పెద్ద లేదా అదనపు పెద్ద పరికరాలలో మీ నిలువు వరుసల పరిమాణాన్ని అనుకూలీకరించండి.

అన్ని బ్రేక్ పాయింట్లు

చిన్న పరికరాల నుండి పెద్ద వాటి వరకు ఒకే విధంగా ఉండే గ్రిడ్‌ల కోసం, .colమరియు .col-*తరగతులను ఉపయోగించండి. మీకు ప్రత్యేక పరిమాణ కాలమ్ అవసరమైనప్పుడు సంఖ్యా తరగతిని పేర్కొనండి; లేకపోతే, కట్టుబడి ఉండటానికి సంకోచించకండి .col.

కల్

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

క్షితిజ సమాంతరంగా పేర్చబడి ఉంటుంది

ఒకే .col-sm-*తరగతి సెట్‌ను ఉపయోగించి, మీరు ప్రాథమిక గ్రిడ్ సిస్టమ్‌ను సృష్టించవచ్చు, అది పేర్చబడి ప్రారంభమై చిన్న బ్రేక్‌పాయింట్ ( sm) వద్ద అడ్డంగా మారుతుంది.

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

కలపండి మరియు సరిపోల్చండి

మీ నిలువు వరుసలు కొన్ని గ్రిడ్ స్థాయిలలో పేర్చబడకూడదనుకుంటున్నారా? ప్రతి శ్రేణికి అవసరమైన వివిధ తరగతుల కలయికను ఉపయోగించండి. ఇది ఎలా పని చేస్తుందనే దాని గురించి మంచి ఆలోచన కోసం దిగువ ఉదాహరణను చూడండి.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

గట్టర్స్

బ్రేక్‌పాయింట్-నిర్దిష్ట పాడింగ్ మరియు నెగటివ్ మార్జిన్ యుటిలిటీ క్లాస్‌ల ద్వారా గట్టర్‌లను ప్రతిస్పందనాత్మకంగా సర్దుబాటు చేయవచ్చు. ఇచ్చిన వరుసలో గట్టర్‌లను మార్చడానికి, sలో .rowమరియు సరిపోలే ప్యాడింగ్ యుటిలిటీలపై ప్రతికూల మార్జిన్ యుటిలిటీని జత చేయండి .col. మళ్లీ సరిపోలే పాడింగ్ యుటిలిటీని ఉపయోగించి , అవాంఛిత ఓవర్‌ఫ్లోను నివారించడానికి .containerలేదా .container-fluidపేరెంట్‌ను కూడా సర్దుబాటు చేయాల్సి ఉంటుంది.

lgబూట్‌స్ట్రాప్ గ్రిడ్‌ను పెద్ద ( ) బ్రేక్‌పాయింట్ మరియు ఎగువన అనుకూలీకరించడానికి ఇక్కడ ఒక ఉదాహరణ ఉంది . .colమేము తో ప్యాడింగ్‌ని పెంచాము , పేరెంట్‌తో .px-lg-5దానిని ప్రతిఘటించి, ఆపై రేపర్‌ని తో సర్దుబాటు చేసాము ..mx-lg-n5.row.container.px-lg-5

అనుకూల కాలమ్ పాడింగ్

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

వరుస నిలువు వరుసలు

.row-cols-*మీ కంటెంట్ మరియు లేఅవుట్‌ను ఉత్తమంగా అందించే నిలువు వరుసల సంఖ్యను త్వరగా సెట్ చేయడానికి ప్రతిస్పందించే తరగతులను ఉపయోగించండి. సాధారణ .col-*తరగతులు వ్యక్తిగత నిలువు వరుసలకు వర్తిస్తాయి (ఉదా, ), వరుస నిలువు వరుసల తరగతులు పేరెంట్‌పై సత్వరమార్గంగా .col-md-4సెట్ చేయబడతాయి ..row

ప్రాథమిక గ్రిడ్ లేఅవుట్‌లను త్వరగా సృష్టించడానికి లేదా మీ కార్డ్ లేఅవుట్‌లను నియంత్రించడానికి ఈ అడ్డు వరుస నిలువు వరుసల తరగతులను ఉపయోగించండి.

కాలమ్

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

కాలమ్

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

కాలమ్

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

కాలమ్

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

కాలమ్

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

మీరు సాస్ మిక్సిన్‌ని కూడా ఉపయోగించవచ్చు row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

అమరిక

నిలువు వరుసలను నిలువుగా మరియు అడ్డంగా సమలేఖనం చేయడానికి ఫ్లెక్స్‌బాక్స్ సమలేఖన ప్రయోజనాలను ఉపయోగించండి. ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 10-11 ఫ్లెక్స్ కంటైనర్‌లో క్రింద చూపిన విధంగా ఫ్లెక్స్ ఐటెమ్‌ల నిలువు అమరికకు మద్దతు ఇవ్వదు . min-height మరిన్ని వివరాల కోసం Flexbugs #3ని చూడండి.

నిలువు అమరిక

మూడు నిలువు వరుసలలో ఒకటి

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

మూడు నిలువు వరుసలలో ఒకటి

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

క్షితిజ సమాంతర అమరిక

రెండు నిలువు వరుసలలో ఒకటి

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

కాలువలు లేవు

మా ముందే నిర్వచించిన గ్రిడ్ తరగతుల్లో నిలువు వరుసల మధ్య ఉన్న గట్టర్‌లను దీనితో తీసివేయవచ్చు .no-gutters. ఇది అన్ని తక్షణ పిల్లల నిలువు వరుసల marginనుండి ప్రతికూల లు .rowమరియు క్షితిజ సమాంతరాలను తొలగిస్తుంది .padding

ఈ శైలులను సృష్టించడానికి సోర్స్ కోడ్ ఇక్కడ ఉంది. కాలమ్ ఓవర్‌రైడ్‌లు మొదటి పిల్లల నిలువు వరుసలకు మాత్రమే స్కోప్ చేయబడతాయని మరియు అట్రిబ్యూట్ సెలెక్టర్ ద్వారా టార్గెట్ చేయబడతాయని గమనించండి . ఇది మరింత నిర్దిష్టమైన సెలెక్టర్‌ని రూపొందిస్తున్నప్పటికీ, కాలమ్ పాడింగ్‌ను స్పేసింగ్ యుటిలిటీలతో మరింత అనుకూలీకరించవచ్చు .

ఎడ్జ్ టు ఎడ్జ్ డిజైన్ కావాలా? తల్లిదండ్రులను వదలండి .containerలేదా .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

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

.col-6 .col-md-4

<div class="row no-gutters">
  <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>

కాలమ్ చుట్టడం

ఒకే అడ్డు వరుసలో 12 కంటే ఎక్కువ నిలువు వరుసలను ఉంచినట్లయితే, అదనపు నిలువు వరుసల యొక్క ప్రతి సమూహం ఒక యూనిట్‌గా, ఒక కొత్త లైన్‌లో చుట్టబడుతుంది.

.col-9

.col-4
9 + 4 = 13 > 12 నుండి, ఈ 4-కాలమ్-వెడల్పు డివి ఒక ప్రక్కనే ఉన్న యూనిట్‌గా కొత్త లైన్‌లో చుట్టబడి ఉంటుంది.

.col-6
తదుపరి నిలువు వరుసలు కొత్త లైన్‌లో కొనసాగుతాయి.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

కాలమ్ విచ్ఛిన్నం

ఫ్లెక్స్‌బాక్స్‌లో కొత్త లైన్‌కి నిలువు వరుసలను విచ్ఛిన్నం చేయడానికి ఒక చిన్న హాక్ అవసరం: width: 100%మీరు మీ నిలువు వరుసలను కొత్త లైన్‌కి చుట్టాలనుకునే చోట ఒక మూలకాన్ని జోడించండి. సాధారణంగా ఇది బహుళ sతో సాధించబడుతుంది .row, కానీ ప్రతి అమలు పద్ధతి దీనికి కారణం కాదు.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

మీరు మా ప్రతిస్పందించే డిస్‌ప్లే యుటిలిటీలతో నిర్దిష్ట బ్రేక్‌పాయింట్‌ల వద్ద కూడా ఈ విరామాన్ని వర్తింపజేయవచ్చు .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

క్రమాన్ని మార్చడం

ఆర్డర్ తరగతులు

మీ కంటెంట్ దృశ్యమాన క్రమాన్ని.order- నియంత్రించడానికి తరగతులను ఉపయోగించండి . ఈ తరగతులు ప్రతిస్పందిస్తాయి, కాబట్టి మీరు బ్రేక్‌పాయింట్ ద్వారా సెట్ చేయవచ్చు (ఉదా, ). మొత్తం ఐదు గ్రిడ్ శ్రేణుల కోసం మద్దతును కలిగి ఉంటుంది .order.order-1.order-md-2112

మొదట DOMలో, ఆర్డర్ వర్తించదు

పెద్ద ఆర్డర్‌తో DOMలో రెండవది

DOMలో మూడవది, 1 ఆర్డర్‌తో

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

వర్తింపజేయడం ద్వారా మరియు ( ) వరుసగా ఒక మూలకాన్ని మార్చే ప్రతిస్పందన .order-firstమరియు తరగతులు కూడా ఉన్నాయి. ఈ తరగతులను అవసరమైన విధంగా సంఖ్యా తరగతులతో కూడా కలపవచ్చు..order-lastorderorder: -1order: 13order: $columns + 1.order-*

DOMలో మొదటిది, చివరిగా ఆర్డర్ చేయబడింది

DOMలో రెండవది, క్రమం చేయబడలేదు

DOMలో మూడవది, ముందుగా ఆర్డర్ చేయబడింది

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

నిలువు వరుసలను ఆఫ్‌సెట్ చేస్తోంది

మీరు గ్రిడ్ నిలువు వరుసలను రెండు విధాలుగా ఆఫ్‌సెట్ చేయవచ్చు: మా ప్రతిస్పందించే .offset-గ్రిడ్ తరగతులు మరియు మా మార్జిన్ యుటిలిటీలు . గ్రిడ్ తరగతులు నిలువు వరుసలకు సరిపోలే పరిమాణంలో ఉంటాయి, అయితే ఆఫ్‌సెట్ యొక్క వెడల్పు వేరియబుల్ అయిన శీఘ్ర లేఅవుట్‌లకు మార్జిన్‌లు మరింత ఉపయోగకరంగా ఉంటాయి.

ఆఫ్‌సెట్ తరగతులు

.offset-md-*తరగతులను ఉపయోగించి నిలువు వరుసలను కుడివైపుకు తరలించండి . ఈ తరగతులు నిలువు వరుసల వారీగా నిలువు వరుస యొక్క ఎడమ మార్జిన్‌ను పెంచుతాయి *. ఉదాహరణకు, నాలుగు నిలువు వరుసలపై .offset-md-4కదులుతుంది ..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

ప్రతిస్పందించే బ్రేక్‌పాయింట్‌ల వద్ద కాలమ్ క్లియరింగ్‌తో పాటు, మీరు ఆఫ్‌సెట్‌లను రీసెట్ చేయాల్సి రావచ్చు. గ్రిడ్ ఉదాహరణలో దీన్ని చర్యలో చూడండి .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

మార్జిన్ యుటిలిటీస్

v4లో ఫ్లెక్స్‌బాక్స్‌కి తరలించడంతో, మీరు .mr-autoతోబుట్టువుల నిలువు వరుసలను ఒకదానికొకటి దూరంగా ఉంచడం వంటి మార్జిన్ యుటిలిటీలను ఉపయోగించవచ్చు.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

గూడు కట్టడం

డిఫాల్ట్ గ్రిడ్‌తో మీ కంటెంట్‌ను నెస్ట్ చేయడానికి, ఇప్పటికే ఉన్న నిలువు వరుసలో కొత్త .rowమరియు నిలువు వరుసల సెట్‌ను జోడించండి . సమూహ అడ్డు వరుసలు 12 లేదా అంతకంటే తక్కువ వరకు జోడించే నిలువు వరుసల సమితిని కలిగి ఉండాలి (మీరు అందుబాటులో ఉన్న మొత్తం 12 నిలువు వరుసలను ఉపయోగించాల్సిన అవసరం లేదు)..col-sm-*.col-sm-*

స్థాయి 1: .col-sm-9

స్థాయి 2: .col-8 .col-sm-6

స్థాయి 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

సాస్ మిక్సిన్స్

బూట్‌స్ట్రాప్ యొక్క సోర్స్ సాస్ ఫైల్‌లను ఉపయోగిస్తున్నప్పుడు, కస్టమ్, సెమాంటిక్ మరియు రెస్పాన్సివ్ పేజీ లేఅవుట్‌లను రూపొందించడానికి మీరు Sass వేరియబుల్స్ మరియు మిక్సిన్‌లను ఉపయోగించే ఎంపికను కలిగి ఉంటారు. మా ముందే నిర్వచించబడిన గ్రిడ్ తరగతులు వేగవంతమైన ప్రతిస్పందించే లేఅవుట్‌ల కోసం ఉపయోగించడానికి సిద్ధంగా ఉన్న తరగతుల మొత్తం సూట్‌ను అందించడానికి ఇదే వేరియబుల్స్ మరియు మిక్సిన్‌లను ఉపయోగిస్తాయి.

వేరియబుల్స్

వేరియబుల్స్ మరియు మ్యాప్‌లు నిలువు వరుసల సంఖ్య, గట్టర్ వెడల్పు మరియు ఫ్లోటింగ్ నిలువు వరుసలను ప్రారంభించే మీడియా ప్రశ్న పాయింట్‌ను నిర్ణయిస్తాయి. పైన డాక్యుమెంట్ చేయబడిన ముందే నిర్వచించబడిన గ్రిడ్ క్లాస్‌లను రూపొందించడానికి, అలాగే దిగువ జాబితా చేయబడిన కస్టమ్ మిక్సిన్‌ల కోసం మేము వీటిని ఉపయోగిస్తాము.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

మిక్సిన్స్

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

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ఉదాహరణ వినియోగం

మీరు వేరియబుల్స్‌ను మీ స్వంత అనుకూల విలువలకు సవరించవచ్చు లేదా మిక్సిన్‌లను వాటి డిఫాల్ట్ విలువలతో ఉపయోగించవచ్చు. మధ్య అంతరంతో రెండు-నిలువు వరుసల లేఅవుట్‌ని సృష్టించడానికి డిఫాల్ట్ సెట్టింగ్‌లను ఉపయోగించే ఉదాహరణ ఇక్కడ ఉంది.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

ప్రధాన కంటెంట్

సెకండరీ కంటెంట్

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

గ్రిడ్‌ను అనుకూలీకరించడం

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

నిలువు వరుసలు మరియు గట్టర్లు

గ్రిడ్ నిలువు వరుసల సంఖ్యను Sass వేరియబుల్స్ ద్వారా సవరించవచ్చు. కాలమ్ గట్టర్‌ల కోసం వెడల్పును సెట్ $grid-columnsచేస్తున్నప్పుడు ఒక్కొక్క నిలువు వరుస యొక్క వెడల్పులను (శాతంలో) రూపొందించడానికి ఉపయోగించబడుతుంది .$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

గ్రిడ్ స్థాయిలు

నిలువు వరుసలను దాటి, మీరు గ్రిడ్ శ్రేణుల సంఖ్యను కూడా అనుకూలీకరించవచ్చు. మీరు కేవలం నాలుగు గ్రిడ్ శ్రేణులను మాత్రమే కోరుకుంటే, మీరు ఇలాంటి వాటికి అప్‌డేట్ $grid-breakpointsచేయాలి $container-max-widths:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass వేరియబుల్స్ లేదా మ్యాప్‌లకు ఏవైనా మార్పులు చేస్తున్నప్పుడు, మీరు మీ మార్పులను సేవ్ చేసి, మళ్లీ కంపైల్ చేయాలి. అలా చేయడం వలన నిలువు వరుసల వెడల్పులు, ఆఫ్‌సెట్‌లు మరియు ఆర్డర్ కోసం ముందే నిర్వచించబడిన గ్రిడ్ తరగతుల యొక్క సరికొత్త సెట్‌ను అవుట్‌పుట్ చేస్తుంది. అనుకూల బ్రేక్‌పాయింట్‌లను ఉపయోగించడానికి ప్రతిస్పందించే విజిబిలిటీ యుటిలిటీలు కూడా అప్‌డేట్ చేయబడతాయి. pxగ్రిడ్ విలువలను (కాదు rem, em, లేదా %) లో సెట్ చేసినట్లు నిర్ధారించుకోండి .