in English
Flotar
Alterne flotantes en cualquier elemento, a través de cualquier punto de interrupción, utilizando nuestras utilidades flotantes receptivas.
Visión general
Estas clases de utilidad hacen flotar un elemento a la izquierda o a la derecha, o deshabilitan la flotación, en función del tamaño de la ventana gráfica actual mediante la propiedad CSSfloat
. !important
se incluye para evitar problemas de especificidad. Estos utilizan los mismos puntos de interrupción de la ventana gráfica que nuestro sistema de cuadrícula. Tenga en cuenta que las utilidades flotantes no tienen efecto en los elementos flexibles.
Clases
Alternar un flotador con una clase:
Flotar a la izquierda en todos los tamaños de ventana gráfica
Flotar a la derecha en todos los tamaños de ventana gráfica
No flote en todos los tamaños de ventana gráfica
<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>
mezclas
O por Sass mezclando:
.element {
@include float-left;
}
.another-element {
@include float-right;
}
.one-more {
@include float-none;
}
Sensible
También existen variaciones de respuesta para cada float
valor.
Flotar a la izquierda en ventanas de tamaño SM (pequeño) o más anchas
Flotar a la izquierda en ventanas de tamaño MD (mediano) o más anchas
Flotador a la izquierda en ventanas de tamaño LG (grande) o más anchas
Flotador a la izquierda en ventanas de tamaño XL (extra grande) o más anchas
<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>
Aquí están todas las clases de apoyo;
.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