in English
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.
Aulas
Alternar um float com uma classe:
Flutuar para a esquerda em todos os tamanhos de janela de visualização
Flutuar à direita em todos os tamanhos de janela de visualização
Não flutue em todos os tamanhos de viewport
<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>
Mixins
Ou por Sass mixin:
.element {
@include float-left;
}
.another-element {
@include float-right;
}
.one-more {
@include float-none;
}
Responsivo
Também existem variações responsivas para cada float
valor.
Flutuar para a esquerda em viewports de tamanho SM (pequeno) ou maior
Flutuar para a esquerda em viewports de tamanho MD (médio) ou mais largo
Flutuar para a esquerda em viewports de tamanho LG (grande) ou maior
Flutuar para a esquerda em viewports de tamanho XL (extra-grande) ou mais largo
<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>
Aqui estão todas as classes de suporte;
.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