Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
in English

Pozycja

Użyj tych pomocników, aby szybko skonfigurować pozycję elementu.

Naprawiono górę

Umieść element na górze rzutni, od krawędzi do krawędzi. Upewnij się, że rozumiesz konsekwencje stałej pozycji w swoim projekcie; może być konieczne dodanie dodatkowego kodu CSS.

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

Naprawiono dno

Umieść element na dole rzutni, od krawędzi do krawędzi. Upewnij się, że rozumiesz konsekwencje stałej pozycji w swoim projekcie; może być konieczne dodanie dodatkowego kodu CSS.

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

Lepka góra

Umieść element na górze rzutni, od krawędzi do krawędzi, ale dopiero po przewinięciu poza nim.

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

Responsywny lepki top

Istnieją również warianty responsywne dla .sticky-topużyteczności.

<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>

Lepkie dno

Umieść element na dole rzutni, od krawędzi do krawędzi, ale dopiero po przewinięciu poza nim.

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

Responsywne lepkie dno

Istnieją również warianty responsywne dla .sticky-bottomużyteczności.

<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>