Source

ଭାସମାନ |

ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ଫ୍ଲୋଟ୍ ଉପଯୋଗିତାକୁ ବ୍ୟବହାର କରି ଯେକ any ଣସି ଉପାଦାନ ଉପରେ, ଯେକ any ଣସି ବ୍ରେକପଏଣ୍ଟରେ ଟୋଗଲ୍ ଭାସମାନ |

ସମୀକ୍ଷା

ଏହି ୟୁଟିଲିଟି ଶ୍ରେଣୀଗୁଡ଼ିକ 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