బూట్స్ట్రాప్ 5 గ్రిడ్: మీడియం డివైసెస్

మధ్యతరహా పరికరం గ్రాడ్ ఇస్ట్రాన్స్

ఎక్స్ట్రా స్మాల్ స్మాల్ మీడియం లార్జ్ ఎక్స్ట్రా లార్జ్ XXL
క్లాస్ ప్రిఫిక్స్ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
స్క్రీన్ వెడిథ్ <576px >=576px >=768px >=992px >=1200px >=1400px

ముంది చాప్టర్లో, చిన్న పరికరాలకు ఉపయోగపడే క్లాస్లను కలిగిస్తున్న గ్రాడ్ ఇస్ట్రాన్స్ అన్ని మేము ప్రదర్శించాము. మేము రెండు div (నిలువులు) వాడి, మరియు వాటిని 25% / 75% విభజనను ఇచ్చాము:

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

కానీ, మధ్యతరహా పరికరాలపై, 50% / 50% విభజనను కలిగిస్తున్న డిజైన్ మంచిది ఉంటుంది.

మధ్యతరహా పరికరం అనేది స్క్రీన్ వెడిథ్ గా నిర్వచించబడింది768 పిక్సెల్స్ నుండి 991 పిక్సెల్స్ వరకు.

మధ్యతరహా పరికరాలకు, మేము ఉపయోగించనున్నాము .col-md-* క్లాస్:

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

చిన్న పరికరాలపై, ఉపయోగించండి -sm- యుక్తి క్లాస్. మధ్యతరహా పరికరాలపై, ఉపయోగించండి -md- యుక్తి క్లాస్.

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

实例

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      
世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...

    </div>
    

      
1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

    </div>
  </div>
</div>

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

注意：确保总和等于或小于 12（不需要使用所有 12 个可用列）：

仅使用 Medium

在下例中，我们只指定了 .col-md-6 类（没有 .col-sm-*）。这意味着中型、大型、超大型和 XXL 设备将拆分 50% / 50% - 因为该类会扩展。但是，对于小型和超小型设备，将垂直堆叠（100% 宽度）：

实例

<div class="row">
  

    
世界自然基金会（WWF），成立于1961年4月29日，其标志是一只大熊猫 ...

  </div>
  

    
1980年，WWF正式来到中国，受中国政府邀请来华开展大熊猫及其栖息地的保护工作 ...

  </div>
</div>

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

స్వయంచాలక సంస్థాపన నిలువులు

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

ప్రదర్శన పరిమాణంకనీసం 768px కంటే తక్కువనిలువులు హొరిజంటల్గా పొందుపరచబడతాయి:

<!-- రెండు నిలువులు: మధ్యతరహా మరియు పెద్ద పరికరాలలో 50% వెడల్పం -->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>
<!-- నాలుగు నిలువులు: మధ్యతరహా మరియు పెద్ద పరికరాలలో 25% వెడల్పం -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

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

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