Bootstrap 5 గ్రిడ్: స్మాల్ డివైసెస్

小型设备网格实例

XSmall Small Medium Large Extra Large XXL
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
屏幕宽度 <576px >=576px >=768px >=992px >=1200px >=1400px

假设我们有一个包含两列的简单布局。对于小型设备，我们希望将列拆分 25% / 75%。

小型设备被定义为屏幕宽度576 పిక్సెల్స్ నుండి 767 పిక్సెల్స్ వరకు.

చిన్న పరికరానికి, మేము ఉపయోగించాలి అని ఉపయోగించి క్లాసు.

మేము రెండు నిలువులకు ఈ క్లాసును జోడిస్తాము:

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

ఈ ఉదాహరణ చిన్న (మధ్యతరహా, పెద్ద, అధిక పెద్ద మరియు అతి పెద్ద) పరికరాలపై 25% / 75% విభజనను సృష్టిస్తుంది. చిన్న పరికరంపై, ఇది స్వయంచాలకంగా పెరుగుతుంది (100%):

ఉదాహరణ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>ప్రపంచ ప్రకృతి ఫౌండేషన్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతీకం ఒక పరికరం ఉంది ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>1980 సంవత్సరంలో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వ ఆహ్వానం పై పరిచయం చేసింది ...</p>
    </div>
  </div>
</div>

స్వయంగా ప్రయత్నించండి

గమనిక:మొత్తం 12 కంటే తక్కువగా లేదా సమానంగా ఉండాలి (అన్ని 12 లబ్ధించిన నిలువులను ఉపయోగించకుండా):

33.3% / 66.6% విభజన కోసం మీరు ఉపయోగించాలి అని .col-sm-4 మరియు .col-sm-850% / 50% విభజన కోసం మీరు ఉపయోగించాలి అని .col-sm-6 మరియు .col-sm-6):

ఉదాహరణ

/* 33.3/66.6% split: */
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>ప్రపంచ ప్రకృతి ఫౌండేషన్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతీకం ఒక పరికరం ఉంది ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980 సంవత్సరంలో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వ ఆహ్వానం పై పరిచయం చేసింది ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% విభజన: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>ప్రపంచ ప్రకృతి ఫౌండేషన్ (WWF), 1961 ఏప్రిల్ 29 న స్థాపించబడింది, దాని ప్రతీకం ఒక పరికరం ఉంది ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980 సంవత్సరంలో, WWF ఆధికారికంగా చైనాకు వచ్చి, చైనా ప్రభుత్వ ఆహ్వానం పై పరిచయం చేసింది ...</p>
    </div>
  </div>
</div>

స్వయంగా ప్రయత్నించండి

స్వయంచాలక సమాంతర నిలువులు

Bootstrap 5 లో, అన్ని పరికరాలకు సమాన వెడల్పు కలిగిన నిలువులను సృష్టించడానికి ఒక సరళమైన పద్ధతి ఉంది: కేవలం ఉపయోగించి సంఖ్యలను తొలగించి, మరియు మాత్రమే .col-sm-* col ఎలిమెంట్ లోఉపయోగించి .col-sm క్లాస్. Bootstrap ఎన్ని నిలువులు గుర్తించగలదు మరియు ప్రతి నిలువుకు అదే వెడల్పు లభిస్తుంది.

ప్రదర్శన పరిమాణంకనీసం 576pxవరుసలు హొరిజంటల్ స్టాక్ అవుతాయి:

<!-- రెండు నిలువులు: అన్ని ప్రదర్శనలపై 50% వెడల్పు, మరియు అత్యంత చిన్న పరికరాలు (100% వెడల్పు) మినహా -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- నాలుగు నిలువులు: అన్ని ప్రదర్శనలపై 25% వెడల్పు, మరియు అత్యంత చిన్న పరికరాలు (100% వెడల్పు) మినహా -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

స్వయంగా ప్రయత్నించండి

మధ్యతరహా పరికరాలకు వివిధ విభజన శాతాలను చేర్చడానికి తదుపరి చివరి పరిచయం చేస్తుంది.