Source

ਫਲੋਟ

ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਫਲੋਟ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਕਿਸੇ ਵੀ ਤੱਤ 'ਤੇ, ਕਿਸੇ ਵੀ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਫਲੋਟਸ ਨੂੰ ਟੌਗਲ ਕਰੋ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਇਹ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਇੱਕ ਤੱਤ ਨੂੰ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਫਲੋਟ ਕਰਦੀਆਂ ਹਨ, ਜਾਂ CSS floatਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਆਕਾਰ ਦੇ ਆਧਾਰ 'ਤੇ ਫਲੋਟਿੰਗ ਨੂੰ ਅਯੋਗ ਕਰਦੀਆਂ ਹਨ । !importantਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਦਿਆਂ ਤੋਂ ਬਚਣ ਲਈ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਵਾਂਗ ਹੀ ਵਿਊਪੋਰਟ ਬਰੇਕਪੁਆਇੰਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਕਲਾਸਾਂ

ਇੱਕ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਫਲੋਟ ਨੂੰ ਟੌਗਲ ਕਰੋ:

ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਖੱਬੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ

ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਸੱਜੇ ਫਲੋਟ ਕਰੋ

ਸਾਰੇ ਵਿਊਪੋਰਟ ਆਕਾਰਾਂ 'ਤੇ ਫਲੋਟ ਨਾ ਕਰੋ
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

ਮਿਕਸਿਨਸ

ਜਾਂ ਸਾਸ ਮਿਕਸਿਨ ਦੁਆਰਾ:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

ਜਵਾਬਦੇਹ

floatਹਰੇਕ ਮੁੱਲ ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ ।

ਵਿਊਪੋਰਟ ਦੇ ਆਕਾਰ ਦੇ SM (ਛੋਟੇ) ਜਾਂ ਚੌੜੇ 'ਤੇ ਖੱਬੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ

ਵਿਊਪੋਰਟ ਦੇ ਆਕਾਰ ਦੇ MD (ਮੱਧਮ) ਜਾਂ ਚੌੜੇ 'ਤੇ ਖੱਬੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ

ਵਿਊਪੋਰਟ ਦੇ ਆਕਾਰ ਦੇ LG (ਵੱਡੇ) ਜਾਂ ਚੌੜੇ 'ਤੇ ਖੱਬੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ

ਵਿਊਪੋਰਟ ਆਕਾਰ ਦੇ XL (ਵਧੇਰੇ-ਵੱਡੇ) ਜਾਂ ਚੌੜੇ 'ਤੇ ਖੱਬੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

ਇੱਥੇ ਸਾਰੀਆਂ ਸਹਾਇਤਾ ਸ਼੍ਰੇਣੀਆਂ ਹਨ;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none