Байрлал

Элементийн байрлалыг хурдан тохируулахын тулд эдгээр туслахуудыг ашиглана уу.

Энэ хуудсан дээр

Тогтмол дээд

Элементийг харах талбарын дээд талд ирмэгээс ирмэг хүртэл байрлуул. Төсөлдөө тогтмол байрлалын үр дагаврыг ойлгож байгаа эсэхээ шалгаарай; Та нэмэлт CSS нэмэх шаардлагатай байж магадгүй.

<div class="fixed-top">...</div>

Тогтмол ёроол

Элементийг харах цонхны доод талд ирмэгээс ирмэг хүртэл байрлуулна. Төсөлдөө тогтмол байрлалын үр дагаврыг ойлгож байгаа эсэхээ шалгаарай; Та нэмэлт CSS нэмэх шаардлагатай байж магадгүй.

<div class="fixed-bottom">...</div>

Наалттай дээд

Элементийг харах талбарын дээд талд ирмэгээс ирмэг хүртэл байрлуулна, гэхдээ зөвхөн хажуугаар нь гүйлгэсний дараа.

<div class="sticky-top">...</div>

Хариулттай наалттай дээд

Хэрэглээний хувьд хариу үйлдэл үзүүлэх хувилбарууд бас байдаг .sticky-top.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>

Наалдамхай ёроол

Элементийг харах талбарын доод талд ирмэгээс ирмэг хүртэл байрлуулна, гэхдээ зөвхөн хажуугаар нь гүйлгэсний дараа.

<div class="sticky-bottom">...</div>

Хариулттай наалдамхай ёроол

Хэрэглээний хувьд хариу үйлдэл үзүүлэх хувилбарууд бас байдаг .sticky-bottom.

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>