بوت اسپرینگ 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">
      <p>ਵਿਸ਼ਵ ਕੁਦਰਤ ਫਾਊਂਡੇਸ਼ਨ (WWF), 29 ਅਪ੍ਰੈਲ 1961 ਨੂੰ ਸਥਾਪਿਤ ਹੋਈ, ਇਸ ਦਾ ਪ੍ਰਤੀਕ ਇੱਕ ਚਿਤਾਂਗ ਹੈ ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980 ਵਿੱਚ, WWF ਸਰਵੋਤਮ ਤੌਰ 'ਤੇ ਚੀਨ ਆਈ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਸ਼ਲਾਘਾ ਨਾਲ ਚੀਨ ਵਿੱਚ ਪਹੁੰਚੀ ਅਤੇ ਚਿਤਾਂਗ ਦੀ ਸੁਰੱਖਿਆ ਦਾ ਕੰਮ ਕਰਨ ਲਈ ਕਿਹਾ ਗਿਆ ...</p>
    </div>
  </div>
</div>

ਸਿੱਧੇ ਮੈਂ ਕਰਦਾ ਹਾਂ

ਧਿਆਨ:ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕੁੱਲ ਇਕੱਠਾ ਹੋਰ ਜਾਂ ਘੱਟ ਹੈ 12 (ਸਾਰੇ 12 ਉਪਲਬਧ ਸਤੰਭਾਂ ਦਾ ਉਪਯੋਗ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ):

ਮੱਧ ਵਰਤੋਂ ਕਰਨਾ

ਵਿੱਚ ਸਿਰਫ਼ .col-md-6 ਵਰਗ (ਬਿਨਾ .col-sm-*）。ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਮੱਧ, ਵੱਡਾ, ਉਚਿਤ ਅਤੇ XXL ਉਪਕਰਣਾਂ ਵਿੱਚ 50% / 50% ਵੰਡ ਹੋਵੇਗਾ - ਕਿਉਂਕਿ ਇਹ ਵਰਗ ਫੈਲੇਗਾ। ਪਰ, ਛੋਟੇ ਅਤੇ ਛੋਟੇ ਉਪਕਰਣਾਂ ਵਿੱਚ ਵਾਧੂ ਢੰਗ ਨਾਲ ਸਟੋਕ ਕੀਤੇ ਜਾਣਗੇ (100% ਚੌਦਾਈ):

ਉਦਾਹਰਣ

<div class="row">
  <div class="col-md-6">
    <p>ਵਿਸ਼ਵ ਕੁਦਰਤ ਫਾਊਂਡੇਸ਼ਨ (WWF), 29 ਅਪ੍ਰੈਲ 1961 ਨੂੰ ਸਥਾਪਿਤ ਹੋਈ, ਇਸ ਦਾ ਪ੍ਰਤੀਕ ਇੱਕ ਚਿਤਾਂਗ ਹੈ ...</p>
  </div>
  <div class="col-md-6">
    <p>1980 ਵਿੱਚ, WWF ਸਰਵੋਤਮ ਤੌਰ 'ਤੇ ਚੀਨ ਆਈ, ਚੀਨ ਸਰਕਾਰ ਦੀ ਸ਼ਲਾਘਾ ਨਾਲ ਚੀਨ ਵਿੱਚ ਪਹੁੰਚੀ ਅਤੇ ਚਿਤਾਂਗ ਦੀ ਸੁਰੱਖਿਆ ਦਾ ਕੰਮ ਕਰਨ ਲਈ ਕਿਹਾ ਗਿਆ ...</p>
  </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>

ਸਿੱਧੇ ਮੈਂ ਕਰਦਾ ਹਾਂ

ਅਗਲੇ ਚਾਪ ਵਿੱਚ ਵੱਡੇ ਉਪਕਰਣਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਵੰਡ ਪ੍ਰਤੀਸ਼ਤਾਵਾਂ ਜੋੜਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਦਿਖਾਈ ਜਾਵੇਗੀ。