Bootstrap 5 మాట్రిక్స్: అడుగున నుండి హోరిజంటల్ కి

మాట్రిక్స్ ఉదాహరణ: అడుగున పెట్టడం

మాకు ఒక మొదటిగా చిన్న పరికరాలపై అడుగున పెట్టబడే మరియు పెద్ద పరికరాలపై హోరిజంటల్ అవుతుంది మొదటిగా మాట్రిక్స్ సిస్టమ్ సృష్టించండి.

ఈ ఉదాహరణ ఒక సాధారణ 'అడుగున పెట్టడం' రెండు నిలువు అంతే ప్రారంభం చేస్తుంది ప్రాంతాలను ప్రదర్శిస్తుంది, ఇది అన్ని ప్రక్కలుపై 50%/50% విభజనను సృష్టిస్తుంది, కానీ చిన్న ప్రక్కలుపై ఇది స్వయంచాలకంగా అడుగున పెట్టబడుతుంది (100%):

ఉదాహరణ: అడుగున పెట్టడం

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>ప్రక్కలు 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>ప్రక్కలు 2 ...</p>
    </div>
  </div>
</div>

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

హింస.col-sm-* 类中的数字表示 div 应该跨越多少列（共 12 列）。所以，.col-sm-1 跨越 1 列，.col-sm-4 నాలుగు ప్రక్కల పైన ముందుకు చెదురుతుంది.col-sm-6 ఆరు ప్రక్కల పైన ముందుకు చెదురుతుంది మొదలుకొని ముందుకు చెదురుతుంది.

గమనికమొత్తం సంఖ్య కనీసం లేదా తక్కువగా 12 కనీసం ఉండాలి (అన్ని 12 ప్రక్కలను వాడకూడదు):

హింసఅనురూపం ద్వారా క్లాసును .container-fluid కు మార్చండి .containerమీరు ఏ కంటైనర్ నుండి కంటైనర్ క్లాసును మార్చవచ్చు full-width సంస్థాపన మార్చడానికి fixed-width యొక్క ప్రతిస్పందక సంస్థాపన:

ప్రతిస్పందక కంటైనర్

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>ప్రక్కలు 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>ప్రక్కలు 2 ...</p>
    </div>
  </div>
</div>

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

స్వయంచాలక సమాచార సమాచారం

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

రెండు నిలువులు: అన్ని ప్రక్కలపై 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>

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