Flutuador
Alterne floats em qualquer elemento, em qualquer ponto de interrupção, usando nossos utilitários float responsivos.
Visão geral
Essas classes de utilitário flutuam um elemento para a esquerda ou direita, ou desativam a flutuação, com base no tamanho da janela de visualização atual usando a propriedade CSSfloat
. !important
está incluído para evitar problemas de especificidade. Eles usam os mesmos pontos de interrupção da viewport que nosso sistema de grade. Por favor, esteja ciente de que os utilitários float não têm efeito em itens flexíveis.
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
Responsivo
Também existem variações responsivas para cada float
valor.
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
Aqui estão todas as classes de suporte:
.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none
Sass
API de utilitários
Os utilitários flutuantes são declarados em nossa API de utilitários em scss/_utilities.scss
. Saiba como usar a API de utilitários.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),