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 (ꯑꯄꯤꯀꯄꯥ) ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯁꯥꯏꯖꯒꯤ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ ꯂꯦꯞꯇꯅꯥ ꯐ꯭ꯂꯣꯠ ꯇꯧ꯫

ꯑꯦꯝ.ꯗꯤ.(ꯃꯤꯗꯤꯌꯝ) ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯁꯥꯏꯖꯒꯤ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ ꯂꯦꯞꯇꯅꯥ ꯐ꯭ꯂꯣꯠ ꯇꯧ꯫

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